/* Explore LabRuns (/product, apps/web/templates/public/product.html), loaded after home.css and public.css, which give
   the page the homepage's header, type scale (main.home-redesign), buttons, section heads, feature grid and closing.
   The opening is the analyzer's instrument binder set in the indigo field: its printed pages turn on the left and its
   contents, CAP evidence index and evidence archive sit in a white panel on the right. A slim chapter bar follows the
   reader through the parts, which alternate canvas and tint, each with its real screens shown whole in the indigo
   field and a ring on the detail its step quotes; where two screens or a screen and its text share a part, the field
   widens past the column onto a wide stage so each window stays readable. Graphite neutrals and one ink-indigo accent;
   green, amber and red only for Met, Undecided and Not met. product.js adds the motion; every move is a transform or
   an opacity change, and under reduced motion only the fades remain. */

.tour {
  --pd-header: 5rem;
  --pd-bar: 3rem;
  --pd-sticky: calc(var(--pd-header) + var(--pd-bar));
  --pd-pad: clamp(1rem, 2.6vw, 2.5rem);
  --sheet-edge: light-dark(#d6d9df, #b9bdc4);
  overflow-x: clip;
}

.tour section[id] {
  scroll-margin-top: calc(var(--pd-sticky) - 1px);
}

.tour .pd-link {
  margin-top: 2.25rem;
  font-size: var(--lm-font-size-md);
}

.tour .pd-link a {
  text-decoration: none;
}

.tour .pd-link svg {
  width: 1rem;
  height: 1rem;
}

/* A download's arrow points down into the file. */
.tour a > .pd-down {
  width: 1rem;
  height: 1rem;
}

.tour a:hover > .pd-down {
  transform: translateY(2px);
}

/* ---------- The opening: the headline, then the binder in the indigo field ---------- */

.pd-hero {
  padding: clamp(2.5rem, 3.6vw, 3.75rem) 0 clamp(3.5rem, 5vw, 5rem);
}

.pd-hero-copy {
  text-align: center;
}

.tour .pd-hero h1 {
  margin-inline: auto;
}

.pd-hero .hp-lede {
  max-width: 48rem;
}

.pd-binder {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  column-gap: clamp(var(--lm-space-6), 3.5vw, 3.5rem);
  margin-top: clamp(2.25rem, 3vw, 2.75rem);
  padding: clamp(1.25rem, 2.6vw, 2.5rem) clamp(var(--lm-space-4), 2.8vw, 2.75rem);
  border: 1px solid var(--lm-color-border-field);
  border-radius: var(--lm-radius-field);
  background: var(--lm-field);
}

/* ----- The page well: the binder lying open, its current page on the stack ----- */

.well {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lm-space-4);
  min-width: 0;
  margin: 0;
  overflow: clip;
  overflow-clip-margin: 1.5rem;
}

/* Every page is the same letter-shaped sheet, so nothing changes shape as the pages turn; the sheet is as tall as the
   window allows, so a whole page reads at once. */
.well-stage {
  position: relative;
  width: min(100% - 1.5rem, calc((100vh - 15rem) * var(--rn, 0.7727)));
  aspect-ratio: var(--ratio);
}

/* The binder's thickness: a sliver of page edges either side of the current page, thicker on the side with more
   pages, so it thins on the right and grows on the left as you turn. */
.well-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.well-stack::before,
.well-stack::after {
  content: "";
  position: absolute;
  top: var(--lm-space-1);
  bottom: -0.25rem;
  width: 0.625rem;
  background: repeating-linear-gradient(90deg, #fff 0 1.5px, var(--sheet-edge) 1.5px 2.5px);
  box-shadow: 0 0 0 1px var(--lm-paper-edge);
  transition: transform var(--lm-duration-4) var(--ease-out);
}

.well-stack::before {
  right: 100%;
  border-radius: var(--lm-radius-xs) 0 0 var(--lm-radius-xs);
  transform: scaleX(var(--before, 0));
  transform-origin: right;
}

.well-stack::after {
  left: 100%;
  border-radius: 0 var(--lm-radius-xs) var(--lm-radius-xs) 0;
  transform: scaleX(var(--after, 1));
  transform-origin: left;
}

.leaf {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: 0.1875rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 22px 44px -22px rgb(22 25 31 / 45%);
  transform-origin: 50% 100%;
}

.leaf img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  object-position: top center;
}

/* Turning: the page you leave lifts away to one side as the next slides in from the other. */
.leaf:not(.is-current, .is-leaving) {
  visibility: hidden;
}

.leaf:not(.is-current, .is-leaving, .is-near) {
  display: none;
}

.leaf.is-current {
  z-index: 3;
  transition: transform var(--lm-duration-3) var(--ease-out) calc(var(--lm-duration-4) / 2), opacity var(--lm-duration-3) var(--ease-out) calc(var(--lm-duration-4) / 2);
}

.leaf.is-leaving {
  z-index: 2;
  opacity: 0;
  transform: translateX(calc(var(--dir, 1) * -3%));
  transition: transform calc(var(--lm-duration-4) / 2) var(--ease-out), opacity calc(var(--lm-duration-4) / 2) var(--ease-out);
}

.leaf.is-entering {
  opacity: 0;
  transform: translateX(calc(var(--dir, 1) * 4%));
  transition: none;
}

/* Where an evidence-index location sits: the page outlined, a flag on its edge naming the section and page, and a
   ring when the location's box on page 1 is known. */
.leaf::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--lm-color-bg-accent);
  border-radius: var(--lm-radius-frame);
  opacity: 0;
  transition: opacity var(--lm-duration-3) var(--ease-out);
  pointer-events: none;
}

.leaf.is-flagged::after {
  opacity: 1;
}

.leaf-flag {
  position: absolute;
  top: var(--lm-space-5);
  right: -0.875rem;
  max-width: 85%;
  padding: 0.4375rem 0.875rem 0.4375rem var(--lm-space-3);
  border-left: 3px solid var(--lm-color-bg-accent);
  border-radius: 0 0.375rem 0.375rem 0;
  background: var(--lm-color-bg-surface);
  box-shadow: var(--lm-shadow-popover);
  color: var(--lm-color-fg-default);
  font: 600 var(--lm-font-size-xs) / 1.35 var(--lm-font-family-ui);
  opacity: 0;
  transform: translateX(0.5rem);
  transition: opacity var(--lm-duration-3) var(--ease-out) var(--lm-duration-2), transform var(--lm-duration-4) var(--ease-out) var(--lm-duration-2);
  pointer-events: none;
}

.leaf.is-flagged .leaf-flag {
  opacity: 1;
  transform: none;
}

.leaf-ring {
  position: absolute;
  border: 2px solid var(--lm-color-bg-accent);
  border-radius: var(--lm-radius-md);
  box-shadow: 0 0 0 4px var(--lm-color-bg-accent-wash);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lm-duration-3) var(--ease-out) 220ms;
}

.leaf-ring.is-on {
  opacity: 1;
}

/* Under the page: back, where you are, on. */
.well-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lm-space-4);
  width: min(100%, 28rem);
}

.well-readout {
  display: grid;
  justify-items: center;
  min-width: 0;
  font: 400 var(--lm-font-size-xs) / 1.45 var(--lm-font-family-ui);
  text-align: center;
}

.readout-page {
  color: var(--lm-color-fg-default);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.readout-label {
  max-width: 100%;
  overflow: hidden;
  color: var(--lm-color-fg-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--lm-color-border-rule);
  border-radius: 50%;
  background: var(--lm-color-bg-surface);
  color: var(--lm-color-fg-default);
  cursor: pointer;
  transition: border-color var(--lm-duration-2) var(--ease-out), transform var(--lm-duration-2) var(--ease-out);
}

.turn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translate(-65%, -50%) rotate(45deg);
}

.turn-back::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.turn:hover {
  border-color: var(--lm-color-fg-default);
}

.turn:active {
  transform: scale(0.94);
}

.turn:disabled {
  border-color: var(--lm-color-border-default);
  color: var(--lm-color-fg-disabled);
  cursor: default;
}

/* ----- The binder panel: its name, three tabs, their panels and the two downloads ----- */

/* The panel is as tall as the page beside it; its contents scroll within. */
.binder {
  display: flex;
  flex-direction: column;
  min-width: 0;
  contain: size;
  overflow: hidden;
  border-radius: var(--lm-radius-frame);
  background: var(--lm-color-bg-surface);
  box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-far);
}

.binder-head {
  padding: 1.375rem 1.75rem 0;
}

.tour .binder-head h2 {
  font-size: 1.4375rem;
  line-height: 1.2;
}

.binder-head p {
  margin-top: var(--lm-space-1);
  color: var(--lm-color-fg-muted);
  font-size: var(--lm-font-size-sm);
  line-height: 1.5;
}

/* Ruled tabs with one indigo rule that slides to the chosen one (the binder and the review stages). */
.pd-tabs {
  position: relative;
  display: flex;
  gap: 1.75rem;
  border-bottom: 1px solid var(--lm-color-border-rule);
  overflow-x: auto;
  scrollbar-width: none;
}

.pd-tabs [role="tab"] {
  flex: none;
  margin-bottom: -1px;
  padding: 0.875rem 0 0.9375rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--lm-color-fg-muted);
  font: 500 var(--lm-font-size-md) / 1 var(--lm-font-family-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--lm-duration-2) var(--ease-out);
}

.pd-tabs [role="tab"]:hover,
.pd-tabs [aria-selected="true"] {
  color: var(--lm-color-fg-default);
}

.pd-tabs [aria-selected="true"] {
  border-bottom-color: var(--lm-color-bg-accent);
}

.js .pd-tabs [role="tab"] {
  border-bottom-color: transparent;
}

.js .pd-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  background: var(--lm-color-bg-accent);
  transform: translateX(calc(var(--ink-x, 0) * 1px)) scaleX(var(--ink-w, 0));
  transform-origin: 0 0;
  transition: transform var(--lm-duration-5) var(--ease-in-out);
}

.pd-tabs [role="tab"]:focus-visible {
  outline-offset: -3px;
  border-radius: var(--lm-radius-md);
}

.binder-tabs {
  flex: none;
  margin: 0.875rem 1.75rem 0;
}

.binder-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 1.75rem var(--lm-space-2);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--lm-color-border-rule) transparent;
}

.binder-panel:not(.is-current),
.binder-panel[hidden] {
  display: none;
}

/* Contents: each row a button, with the result and the page it starts on behind a dotted leader. */
.toc {
  margin: var(--lm-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.toc-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem var(--lm-space-3) 0.625rem 0.875rem;
  border: 0;
  border-bottom: 1px solid var(--lm-color-border-default);
  background: none;
  color: var(--lm-color-fg-default);
  font: 500 var(--lm-font-size-md) / 1.4 var(--lm-font-family-ui);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--lm-duration-2) var(--ease-out);
}

.toc-front .toc-row {
  padding-block: 0.375rem;
  color: var(--lm-color-fg-muted);
  font-size: var(--lm-font-size-sm);
}

.toc-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--lm-color-bg-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--lm-duration-4) var(--ease-out);
}

.toc-row:hover {
  background: var(--lm-color-bg-hover);
}

.toc-row.is-current {
  background: var(--lm-color-bg-accent-wash);
}

.toc-row.is-current::before {
  transform: none;
}

.toc-row:focus-visible {
  outline-offset: -2px;
}

.toc-title {
  min-width: 0;
}

.toc-leader {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1.5px dotted var(--lm-color-border-rule);
  transform: translateY(-0.3em);
}

.toc-page {
  color: var(--lm-color-fg-muted);
  font-variant-numeric: tabular-nums;
}

.toc-row.is-current .toc-page {
  color: var(--lm-color-fg-default);
  font-weight: 600;
}

/* Each analyzer group's heading, as the printed contents page has it. */
.toc-group span {
  display: block;
  padding: var(--lm-space-4) 0.875rem 0.4375rem;
  border-bottom: 1px solid var(--lm-color-border-rule);
  color: var(--lm-color-fg-muted);
  font: var(--lm-type-label);
  letter-spacing: var(--lm-tracking-label);
}

/* The chosen report's record, version and PDF, revealed under its row. */
.toc-detail {
  padding: var(--lm-space-1) var(--lm-space-3) var(--lm-space-4) 0.875rem;
  border-bottom: 1px solid var(--lm-color-border-default);
  background: var(--lm-color-bg-accent-wash);
  font: 400 var(--lm-font-size-xs) / 1.55 var(--lm-font-family-ui);
}

.toc-version {
  display: grid;
  color: var(--lm-color-fg-body);
}

.toc-record {
  color: var(--lm-color-fg-default);
  font-weight: 600;
}

.toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-space-1) 1.25rem;
  margin-top: 0.375rem;
  color: var(--lm-color-fg-muted);
  font-variant-numeric: tabular-nums;
}

.toc-links a {
  font-weight: 600;
}

.toc-study:not(.is-open) .toc-detail {
  display: none;
}

/* Result marks: Met quiet, Undecided amber, Not met the loudest thing in the list. */
.outcome {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  font: 600 var(--lm-font-size-2xs) / 1.3 var(--lm-font-family-ui);
  white-space: nowrap;
}

.outcome::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

.outcome-met {
  color: var(--lm-color-status-ok-fg);
}

.outcome-undecided {
  color: var(--lm-color-status-warn-fg);
}

.outcome-not-met {
  padding: 0.125rem 0.4375rem;
  border-radius: var(--lm-radius-control);
  background: var(--ui-fail-solid);
  color: var(--ui-on-fail-solid);
}

/* The CAP evidence index: each requirement with the places in the binder that answer it; one opens at a time. */
.index-edition,
.archive-total {
  padding-top: var(--lm-space-4);
  color: var(--lm-color-fg-muted);
  font: 400 var(--lm-font-size-xs) / 1.5 var(--lm-font-family-ui);
  font-variant-numeric: tabular-nums;
}

.requirements {
  margin-top: 0.625rem;
  border-top: 1px solid var(--lm-color-border-default);
}

.requirement {
  border-bottom: 1px solid var(--lm-color-border-default);
}

.requirement summary {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 1rem;
  column-gap: var(--lm-space-3);
  align-items: baseline;
  padding: var(--lm-space-3) var(--lm-space-3) var(--lm-space-3) 0.875rem;
  color: var(--lm-color-fg-body);
  font: 400 var(--lm-font-size-sm) / 1.45 var(--lm-font-family-ui);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--lm-duration-2) var(--ease-out);
}

.requirement summary::-webkit-details-marker {
  display: none;
}

.requirement summary::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid var(--lm-color-fg-muted);
  border-bottom: 1.5px solid var(--lm-color-fg-muted);
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform var(--lm-duration-3) var(--ease-out);
}

.requirement[open] summary::after {
  transform: translateY(0.125rem) rotate(-135deg);
}

.requirement summary:hover {
  background: var(--lm-color-bg-hover);
}

.requirement[open] {
  background: var(--lm-color-bg-accent-wash);
}

.requirement[open] summary {
  box-shadow: inset 2px 0 0 var(--lm-color-bg-accent);
  color: var(--lm-color-fg-default);
}

.requirement summary:focus-visible {
  outline-offset: -2px;
}

.requirement-id {
  color: var(--lm-color-fg-default);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.requirement-records {
  padding: 0 var(--lm-space-3) 0.625rem 0.875rem;
  color: var(--lm-color-fg-muted);
  font: 400 var(--lm-font-size-xs) / 1.5 var(--lm-font-family-ui);
}

.requirement-records span {
  margin-right: var(--lm-space-2);
  color: var(--lm-color-fg-body);
  font-weight: 600;
}

.places {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0 var(--lm-space-3) var(--lm-space-4) 0.875rem;
  list-style: none;
}

.places li {
  display: grid;
  gap: 0.375rem;
}

.place-study {
  color: var(--lm-color-fg-muted);
  font: 400 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.chip {
  padding: 0.3125rem 0.6875rem;
  border: 1px solid var(--lm-color-border-rule);
  border-radius: var(--lm-radius-control);
  background: var(--lm-color-bg-surface);
  color: var(--lm-color-fg-body);
  font: 500 var(--lm-font-size-xs) / 1.35 var(--lm-font-family-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--lm-duration-2) var(--ease-out), color var(--lm-duration-2) var(--ease-out), box-shadow var(--lm-duration-2) var(--ease-out);
}

.chip:hover {
  border-color: var(--lm-color-fg-default);
  color: var(--lm-color-fg-default);
}

.chip.is-current {
  border-color: var(--lm-color-bg-accent);
  box-shadow: inset 0 0 0 1px var(--lm-color-bg-accent);
  color: var(--lm-color-fg-default);
}

/* The evidence archive as a quiet file tree. */
.tree,
.tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree {
  margin-top: 0.625rem;
  border-top: 1px solid var(--lm-color-border-default);
  font: 400 var(--lm-font-size-xs) / 1.5 var(--lm-font-family-ui);
}

.tree li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--lm-space-4);
}

.tree > li {
  padding-block: var(--lm-space-2);
  border-bottom: 1px solid var(--lm-color-border-default);
}

.tree ul {
  grid-column: 1 / -1;
  margin: 0.375rem 0 0 0.3125rem;
  padding-left: var(--lm-space-4);
  border-left: 1px solid var(--lm-color-border-rule);
}

.tree ul li {
  padding-block: 0.1875rem;
}

.tree-name {
  min-width: 0;
  overflow: hidden;
  color: var(--lm-color-fg-body);
  font: 400 var(--lm-font-size-2xs) / 1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-folder > .tree-name {
  color: var(--lm-color-fg-default);
  font-weight: 600;
}

.tree-size {
  color: var(--lm-color-fg-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tree-more {
  color: var(--lm-color-fg-muted);
}

/* The two files: a type tile, the action and what you get. */
.downloads {
  flex: none;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lm-color-border-default);
  background: light-dark(#fbfbfd, #212328);
}

.downloads li + li {
  border-top: 1px solid var(--lm-color-border-default);
}

.tour .downloads a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.875rem;
  align-items: center;
  padding: 0.6875rem 1.75rem var(--lm-space-3);
  color: var(--lm-color-fg-default);
  text-decoration: none;
  transition: background-color var(--lm-duration-2) var(--ease-out);
}

.tour .downloads a:hover {
  background: var(--lm-color-bg-hover);
}

.downloads .pd-down {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--lm-color-fg-accent);
}

.file-type {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2.375rem;
  border-radius: var(--lm-radius-control) 8px var(--lm-radius-control) var(--lm-radius-control);
  background: var(--lm-color-bg-accent-wash);
  color: var(--lm-color-fg-accent);
  font: 700 0.5625rem / 1 var(--lm-font-family-ui);
  letter-spacing: 0.06em;
}

.file-name {
  color: var(--lm-color-fg-default);
  font: 600 var(--lm-font-size-md) / 1.3 var(--lm-font-family-ui);
}

.downloads a:hover .file-name {
  color: var(--lm-color-fg-accent);
}

.file-meta {
  color: var(--lm-color-fg-muted);
  font: 400 var(--lm-font-size-2xs) / 1.45 var(--lm-font-family-ui);
  font-variant-numeric: tabular-nums;
}

/* ---------- The chapter bar: the parts in order, the one being read underlined in indigo ---------- */

.pd-chapters {
  position: sticky;
  top: var(--pd-header);
  z-index: 4;
  border-bottom: 1px solid var(--lm-color-border-default);
  background: color-mix(in srgb, var(--lm-color-bg-canvas) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.pd-chapters ol {
  position: relative;
  display: flex;
  gap: clamp(var(--lm-space-5), 2.8vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.pd-chapters ol::-webkit-scrollbar {
  display: none;
}

.pd-chapters li {
  flex: none;
}

.pd-chapters a {
  display: flex;
  align-items: center;
  min-height: var(--pd-bar);
  color: var(--lm-color-fg-muted);
  font: 500 var(--lm-font-size-sm) / 1.2 var(--lm-font-family-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--lm-duration-2) var(--ease-out);
}

.pd-chapters a:hover,
.pd-chapters a[aria-current] {
  color: var(--lm-color-fg-default);
}

.pd-chapters a:focus-visible {
  outline-offset: -3px;
  border-radius: var(--lm-radius-md);
}

.pd-chapters ol::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  background: var(--lm-color-bg-accent);
  opacity: var(--ink-on, 0);
  transform: translateX(calc(var(--ink-x, 0) * 1px)) scaleX(var(--ink-w, 0));
  transform-origin: 0 0;
  transition: transform var(--lm-duration-5) var(--ease-out), opacity var(--lm-duration-2) var(--ease-out);
}

/* ---------- Each part: canvas or tint, its real screens in the indigo field ---------- */

.pd-section {
  padding-block: var(--lm-space-section);
}

.pd-tint {
  background: var(--lm-color-bg-sunken);
}

.pd-field {
  position: relative;
  min-width: 0;
  padding: var(--pd-pad);
  border: 1px solid var(--lm-color-border-field);
  border-radius: var(--lm-radius-field);
  background: var(--lm-field);
}

/* The wide stage: a field that reaches past the text column on wide screens (up to 1680 px), for a part whose two
   windows, or window and text, would otherwise share the column at a size too small to read. */
.pd-stage {
  --stage: min(100vw - 3rem, 105rem);
  margin-inline: min(0px, (100% - var(--stage)) / 2);
}

/* A real screen in its window, with the ring the steps move. The window rests on the whole screen; a step that needs
   it takes the camera in to its detail for a while. */
.scope {
  position: relative;
  aspect-ratio: var(--ratio, 1800 / 1378);
  overflow: hidden;
  scroll-margin-top: calc(var(--pd-sticky) + var(--lm-space-4));
  scroll-margin-bottom: var(--lm-space-4);
  border-radius: var(--lm-radius-frame);
  background: var(--lm-color-bg-canvas);
  box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-far);
}

/* One screen gives way to the next: the old one leaves before the new one arrives, so two dense screens never show
   through each other. */
.scope-layer {
  position: absolute;
  inset: 0;
  container-type: size;
  opacity: 0;
  transition: opacity calc(var(--lm-duration-4) / 2) var(--ease-out);
}

.scope-layer.is-current {
  z-index: 1;
  opacity: 1;
  transition: opacity var(--lm-duration-3) var(--ease-out) calc(var(--lm-duration-4) / 2);
}

.scope-view {
  position: absolute;
  inset: 0;
  display: block;
}

.scope-fit {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100cqw, 100cqh * var(--r));
  height: min(100cqh, 100cqw / var(--r));
  overflow: hidden;
  background: var(--lm-color-bg-canvas);
}

/* --s is the camera's zoom, so the ring keeps a 2 px line at any zoom; it travels with the transform. */
@property --s {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.scope-canvas {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform var(--lm-duration-5) var(--ease-in-out), --s var(--lm-duration-5) var(--ease-in-out);
}

.scope-canvas img {
  width: 100%;
  height: 100%;
}

.scope-ring {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, 0);
  height: var(--h, 0);
  border: calc(2px / var(--s, 1)) solid var(--lm-color-bg-accent);
  border-radius: calc(var(--lm-radius-frame) / var(--s, 1));
  box-shadow: 0 0 0 calc(4px / var(--s, 1)) var(--lm-color-bg-accent-wash);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--lm-duration-4) var(--ease-out), transform var(--lm-duration-5) var(--ease-out);
  pointer-events: none;
}

.scope-ring.is-on {
  opacity: 1;
  transform: none;
}

/* ---------- Steps: down the side, across beneath a field, or as short tabs ---------- */

.steps {
  margin: var(--lm-space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lm-color-border-default);
}

.step {
  position: relative;
  display: grid;
  gap: 0.375rem;
  width: 100%;
  padding: 1.125rem var(--lm-space-2) 1.25rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--lm-color-border-default);
  background: none;
  color: var(--lm-color-fg-muted);
  font: 400 var(--lm-font-size-md) / 1.6 var(--lm-font-family-ui);
  text-align: left;
  cursor: pointer;
  transition: color var(--lm-duration-3) var(--ease-out);
}

.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--lm-color-bg-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--lm-duration-4) var(--ease-out);
}

.step:hover,
.step.is-current {
  color: var(--lm-color-fg-body);
}

.step.is-current::before {
  transform: none;
}

.step:focus-visible {
  outline-offset: -2px;
}

.step-title {
  color: var(--lm-color-fg-default);
  font: 500 1.0625rem / 1.35 var(--lm-font-family-ui);
  letter-spacing: -0.01em;
  transition: color var(--lm-duration-3) var(--ease-out);
}

.step.is-current .step-title {
  color: var(--lm-color-fg-accent);
}

/* Steps laid across beneath a field: the rule above each one turns indigo. */
.steps-across {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: clamp(1.25rem, 2.2vw, 2.25rem);
  margin-top: 2.25rem;
  border-top: 0;
}

.steps-across .step {
  align-content: start;
  height: 100%;
  padding: 1.125rem var(--lm-space-1) var(--lm-space-2) 0;
  border-top: 2px solid var(--lm-color-border-default);
  border-bottom: 0;
}

.steps-across .step::before {
  left: 0;
  right: 0;
  top: -2px;
  bottom: auto;
  width: auto;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
}

.steps-across .step.is-current::before {
  transform: none;
}

/* Two or three short choices above a field, ruled like tabs. */
.steps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0 0 var(--lm-space-5);
  border-top: 0;
  border-bottom: 1px solid var(--lm-color-border-rule);
}

.steps-tabs .step {
  width: auto;
  padding: 0.875rem 0 0.9375rem;
  border-bottom: 0;
}

.steps-tabs .step::before {
  left: 0;
  right: 0;
  top: auto;
  bottom: -1px;
  width: auto;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
}

.steps-tabs .step.is-current::before {
  transform: none;
}

.steps-tabs .step-title {
  color: var(--lm-color-fg-muted);
  font-size: var(--lm-font-size-md);
}

.steps-tabs .step:hover .step-title,
.steps-tabs .step.is-current .step-title {
  color: var(--lm-color-fg-default);
}

/* ---------- Report versions: the window across the column, the story and its steps beneath it ---------- */

.versions-foot {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: clamp(var(--lm-space-6), 4vw, var(--lm-space-8));
  align-items: start;
  margin-top: 2.25rem;
}

.versions-story {
  padding-top: 1.125rem;
  color: var(--lm-color-fg-body);
  font-size: var(--lm-font-size-base);
  line-height: 1.7;
}

.versions-foot .steps-across {
  margin-top: 0;
}

/* ---------- Guidance: the bench sheet beside its procedure, their rings joined by one thread ---------- */

.bench {
  position: relative;
  display: flex;
  gap: clamp(var(--lm-space-5), 3vw, 2.75rem);
  align-items: flex-start;
}

.bench .scope {
  flex: var(--rn, 1.3) 1 0%;
  min-width: 0;
}

.tour .thread {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: none;
}

.tour .thread path {
  stroke: var(--lm-color-bg-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity var(--lm-duration-2) var(--ease-out);
}

.tour .thread circle {
  fill: var(--lm-color-bg-accent);
  opacity: 0;
  transition: opacity var(--lm-duration-2) var(--ease-out);
}

.tour .thread.is-drawn path {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 640ms var(--ease-in-out), opacity var(--lm-duration-1) var(--ease-out);
}

.tour .thread.is-drawn circle {
  opacity: 1;
}

/* ---------- Bringing in results: the export, then each screen, on one conveyor ---------- */

.conveyor {
  position: relative;
}

/* The export and the window it goes into, side by side on the wide stage; indigo rules under the one in use. */
.belt {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(var(--lm-space-5), 2.5vw, 2.5rem);
  align-items: start;
}

.station {
  position: relative;
  min-width: 0;
  padding-bottom: 1.25rem;
}

.station::after,
.station::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--lm-color-border-field);
}

.station::before {
  z-index: 1;
  background: var(--lm-color-bg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lm-duration-5) var(--ease-out);
}

.station.is-current::before {
  transform: none;
}

.station-export {
  align-self: center;
}

.export {
  overflow: hidden;
  border-radius: var(--lm-radius-frame);
  background: var(--lm-color-bg-surface);
  box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-far);
}

.export-name {
  padding: 0.625rem var(--lm-space-4);
  border-bottom: 1px solid var(--lm-color-border-default);
  background: light-dark(#f3f4f7, #26282e);
  color: var(--lm-color-fg-default);
  font: 600 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui);
}

.export-text {
  margin: 0;
  padding: 0.875rem var(--lm-space-4) var(--lm-space-2);
  overflow-x: auto;
  color: var(--lm-color-fg-body);
  font: 400 var(--lm-font-size-2xs) / 1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.export-line.is-header {
  color: var(--lm-color-fg-default);
  font-weight: 600;
}

.export-more {
  padding: 0 var(--lm-space-4) 0.875rem;
  color: var(--lm-color-fg-muted);
  font: 400 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui);
}

.tour .export-download {
  margin-top: var(--lm-space-4);
  font-size: var(--lm-font-size-sm);
  font-weight: 500;
  text-decoration: none;
}

/* A row of the export on its way: into import review, or set aside by the saved format. The row it left dims. */
.travelling {
  position: absolute;
  z-index: 3;
  margin: 0;
  color: var(--lm-color-fg-accent);
  font: 400 var(--lm-font-size-2xs) / 1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  pointer-events: none;
}

.travelling.is-set-aside {
  color: var(--lm-color-fg-muted);
  text-decoration: line-through;
  text-decoration-color: var(--lm-color-fg-accent);
}

.export-line {
  transition: opacity var(--lm-duration-2) var(--ease-out);
}

.export-line.is-sent {
  opacity: 0;
}

/* ---------- Laboratory setup: the Library's four drawers feeding the next studies ---------- */

.drawers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lm-color-border-rule);
}

.drawers li {
  display: flex;
  border-bottom: 1px solid var(--lm-color-border-default);
}

.drawers li + li {
  border-left: 1px solid var(--lm-color-border-default);
}

.drawers .drawer-next {
  border-left-style: dashed;
  border-left-color: var(--lm-color-border-rule);
}

.drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
  padding: 1.375rem 1.25rem 1.625rem;
  border: 0;
  background: none;
  color: var(--lm-color-fg-body);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.drawers li:first-child .drawer {
  padding-left: 0;
}

.drawer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--lm-color-bg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lm-duration-4) var(--ease-out);
}

.drawer.is-current::before {
  transform: none;
}

.drawer:focus-visible {
  outline-offset: 2px;
}

.drawer-tab {
  color: var(--lm-color-fg-muted);
  font: var(--lm-type-label);
  letter-spacing: var(--lm-tracking-label);
  transition: color var(--lm-duration-3) var(--ease-out);
}

.drawer:hover .drawer-tab {
  color: var(--lm-color-fg-default);
}

.drawer.is-current .drawer-tab {
  color: var(--lm-color-fg-accent);
}

.drawer-fields {
  display: grid;
  gap: var(--lm-space-2);
  font: 400 var(--lm-font-size-sm) / 1.45 var(--lm-font-family-ui);
}

/* Choosing the next studies draws the indigo rule over every drawer, one after another. */
.cabinet.is-feeding .drawers li:not(.drawer-next) .drawer::before {
  transform: none;
}

.cabinet.is-feeding .drawers li:not(.drawer-next) .drawer-tab {
  color: var(--lm-color-fg-accent);
}

.cabinet.is-feeding .drawers li:nth-child(2) .drawer::before { transition-delay: 60ms; }
.cabinet.is-feeding .drawers li:nth-child(3) .drawer::before { transition-delay: var(--lm-duration-1); }
.cabinet.is-feeding .drawers li:nth-child(4) .drawer::before { transition-delay: var(--lm-duration-2); }

/* ---------- Working together: two colleagues' screens over a three-moment timeline ---------- */

.panes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--lm-space-6), 4vw, 3.5rem);
}

.pane-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lm-space-1) var(--lm-space-3);
  margin-bottom: 0.875rem;
}

.who-name {
  color: var(--lm-color-fg-default);
  font: 500 1.0625rem / 1.25 var(--lm-font-family-ui);
  letter-spacing: -0.01em;
}

.who-role {
  color: var(--lm-color-fg-muted);
  font: var(--lm-type-label);
  letter-spacing: var(--lm-tracking-label);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lm-space-5);
  margin-top: 2.5rem;
  border-top: 1px solid var(--lm-color-border-rule);
}

/* The time that has passed: an indigo rule up to the moment being shown. */
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.5px;
  height: 2px;
  background: var(--lm-color-bg-accent);
  transform: scaleX(var(--progress, 0.17));
  transform-origin: left;
  transition: transform var(--lm-duration-5) var(--ease-in-out);
}

.timeline [role="tab"] {
  position: relative;
  padding: 1.25rem var(--lm-space-2) var(--lm-space-1) 0;
  border: 0;
  background: none;
  color: var(--lm-color-fg-muted);
  font: 500 var(--lm-font-size-base) / 1.4 var(--lm-font-family-ui);
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: color var(--lm-duration-2) var(--ease-out);
}

/* Each moment's marker on the line: hollow until reached. */
.timeline [role="tab"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.3125rem;
  width: 0.5625rem;
  height: 0.5625rem;
  border: 1.5px solid var(--lm-color-border-rule);
  border-radius: 50%;
  background: var(--lm-color-bg-sunken);
  transition: border-color var(--lm-duration-2) var(--ease-out), background-color var(--lm-duration-2) var(--ease-out);
}

.timeline [role="tab"]:hover,
.timeline [aria-selected="true"] {
  color: var(--lm-color-fg-default);
}

.timeline [aria-selected="true"] {
  color: var(--lm-color-fg-accent);
}

.timeline [aria-selected="true"]::before,
.timeline .is-passed::before {
  border-color: var(--lm-color-bg-accent);
  background: var(--lm-color-bg-accent);
}

.timeline [role="tab"]:focus-visible {
  outline-offset: 2px;
  border-radius: var(--lm-radius-md);
}

.moments {
  max-width: 48rem;
  margin-top: 1.25rem;
  color: var(--lm-color-fg-body);
  font-size: var(--lm-font-size-base);
  line-height: 1.7;
}

/* Tab panels in a stack share one place, so the page below never moves when the text changes. */
[data-stack] {
  display: grid;
}

[data-stack] > * {
  grid-area: 1 / 1;
}

[data-stack] > :not(.is-current) {
  visibility: hidden;
}

/* ----- Invitations and roles ----- */

.access {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(5rem, 8vw, 7.5rem);
}

.tour .access-copy h3 {
  max-width: 18ch;
  font-size: clamp(var(--lm-font-size-3xl), 2.6vw, 2.25rem);
}

.access-copy > p:not(.hp-eyebrow) {
  max-width: 32rem;
  margin-top: 1.25rem;
  color: var(--lm-color-fg-muted);
  font-size: var(--lm-font-size-base);
  line-height: 1.7;
}

.roles {
  width: 100%;
  margin-top: var(--lm-space-6);
  border-collapse: collapse;
  text-align: left;
  font: 400 var(--lm-font-size-sm) / 1.55 var(--lm-font-family-ui);
}

.roles th,
.roles td {
  padding: var(--lm-space-3) 0.875rem var(--lm-space-3) 0;
  border-bottom: 1px solid var(--lm-color-border-default);
  vertical-align: top;
}

.roles thead th {
  padding-top: 0;
  border-bottom: 1px solid var(--lm-color-border-rule);
  color: var(--lm-color-fg-muted);
  font: var(--lm-type-label);
  letter-spacing: var(--lm-tracking-label);
}

.roles tbody th {
  width: 8.5rem;
  color: var(--lm-color-fg-default);
  font-weight: 600;
}

.roles td {
  color: var(--lm-color-fg-body);
}

/* ---------- Review: Correction, Results, Report, Sign-off and History in one window beside their words ---------- */

.review-tabs {
  margin-bottom: var(--lm-space-5);
}

/* The stage's words on the left, the window on the right; the text column is never taller than the window, so no gap
   opens beneath either. */
.review-stage {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(var(--lm-space-6), 3.5vw, 3.5rem);
  align-items: start;
}

.review-tabs {
  gap: var(--lm-space-5);
}

.review-panel > p {
  max-width: 34rem;
  color: var(--lm-color-fg-body);
  font-size: var(--lm-font-size-base);
  line-height: 1.7;
}

.review-panel > .pd-link {
  margin-top: 1.25rem;
}

/* ---------- The link to the full feature list, and the closing ---------- */

.pd-features .hp-section-head {
  margin-bottom: 0;
}

.tour .pd-features .pd-link {
  margin-top: 1.25rem;
}

.pd-closing {
  border-top: 1px solid var(--lm-color-border-default);
}

.tour .pd-closing h2 {
  max-width: 17ch;
}

.tour .pd-closing p {
  max-width: 38rem;
}

.tour .pd-closing p + p {
  margin-top: var(--lm-space-4);
}

/* ---------- Without the script: every screen, page and panel in order ---------- */

@media (scripting: none) {
  .scope {
    aspect-ratio: auto;
  }

  .scope-layer {
    position: relative;
    inset: auto;
    flex: none;
    aspect-ratio: var(--r);
    opacity: 1;
  }

  .scope-layer + .scope-layer {
    border-top: 1px solid var(--lm-color-border-default);
  }

  .well-stage {
    display: flex;
    gap: var(--lm-space-4);
    width: 100%;
    aspect-ratio: auto;
    overflow-x: auto;
  }

  .well-stack,
  .well-bar {
    display: none;
  }

  .leaf,
  .leaf:not(.is-current, .is-leaving),
  .leaf:not(.is-current, .is-leaving, .is-near) {
    position: relative;
    display: block;
    flex: 0 0 82%;
    aspect-ratio: var(--ratio);
    visibility: visible;
  }

  .binder {
    contain: none;
  }

  .binder-panel:not(.is-current) {
    display: block;
  }

  [data-stack] {
    display: block;
  }

  [data-stack] > :not(.is-current) {
    visibility: visible;
  }

  .binder-panel + .binder-panel,
  [data-stack] > * + * {
    margin-top: var(--lm-space-6);
  }

  .toc-study:not(.is-open) .toc-detail {
    display: block;
  }
}

/* ---------- Narrower screens ---------- */

@media (max-width: 70rem) {
  .drawers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .drawers li:nth-child(4) {
    border-left: 0;
  }

  .drawers li:nth-child(4) .drawer {
    padding-left: 0;
  }

}

@media (max-width: 62rem) {
  .tour {
    --pd-header: 4.25rem;
    --pd-bar: 2.75rem;
  }

  /* The binder: the page first, the panel beneath it at its own height. */
  .pd-binder {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--lm-space-6);
  }

  .well-stage {
    width: min(100% - 1.5rem, calc(min(62vh, 34rem) * var(--rn, 0.7727)));
  }

  .binder {
    contain: none;
  }

  .binder-body {
    overflow: visible;
  }

  .versions-foot,
  .belt,
  .review-stage,
  .access {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a narrow screen: the tabs, the window, then its words. */
  .review-stage {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .review-words {
    display: contents;
  }

  .review-stage > .pd-field {
    order: 1;
    align-self: stretch;
    margin-inline: 0;
  }

  .review-panels {
    order: 2;
    margin-top: var(--lm-space-5);
  }

  /* Under the window the words can take their own height: the window above them stays put. */
  @media screen and (scripting: enabled) {
    .review-panels > :not(.is-current) {
      display: none;
    }
  }

  .access {
    gap: 2.5rem;
  }

  /* The drawers run in one row beneath their screen and scroll sideways, so the screen stays in
     view while you choose. */
  .drawers {
    display: flex;
    gap: 0;
    margin-inline: calc((100vw - 100%) / -2);
    padding-inline: calc((100vw - 100%) / 2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--lm-space-5);
    scrollbar-width: none;
    border-top: 0;
  }

  .drawers li {
    flex: 0 0 min(15rem, 72vw);
    scroll-snap-align: start;
    border-top: 1px solid var(--lm-color-border-rule);
  }

  .drawers li:nth-child(4) {
    border-left: 1px solid var(--lm-color-border-default);
  }

  .drawers li:first-child {
    border-left: 0;
  }

  .drawers li:nth-child(4) .drawer {
    padding-left: 1.25rem;
  }

  .drawers li:first-child .drawer {
    padding-left: 0;
  }

  /* The chapters run to the screen's edges and fade there, so a name that runs off the edge fades out of view and
     is never sliced. */
  .pd-chapters ol {
    margin-inline: calc((100vw - 100%) / -2);
    padding-inline: calc((100vw - 100%) / 2);
    scroll-padding-inline: calc((100vw - 100%) / 2);
    mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 2.5rem), transparent);
  }

  /* Touch targets of at least 44 px. */
  .chip,
  .toc-row {
    min-height: 2.75rem;
  }

  .chip {
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 44rem) {
  .review-tabs {
    gap: var(--lm-space-4);
  }

  .tour {
    --pd-header: 4rem;
  }

  .pd-binder {
    margin-top: var(--lm-space-6);
    padding: var(--lm-space-5) var(--lm-space-3) var(--lm-space-3);
    border-radius: var(--lm-radius-field);
  }

  .binder {
    border-radius: var(--lm-radius-frame);
  }

  .binder-head,
  .binder-body {
    padding-inline: var(--lm-space-4);
  }

  .binder-tabs {
    margin-inline: var(--lm-space-4);
    gap: var(--lm-space-4);
  }

  /* All three tabs stay in view; a long name takes a second line. */
  .binder-tabs [role="tab"] {
    flex: 0 1 auto;
    white-space: normal;
    text-align: left;
  }

  .tour .downloads a {
    padding-inline: var(--lm-space-4);
  }

  .pd-field {
    padding: var(--lm-space-3);
    border-radius: var(--lm-radius-field);
  }

  .drawers {
    scroll-padding-inline: var(--lm-space-4);
  }

  .scope {
    border-radius: var(--lm-radius-frame);
  }

  .bench {
    flex-direction: column;
    align-items: stretch;
  }

  .bench .scope {
    flex: none;
  }

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

  .steps-across {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .steps-across .step {
    padding-bottom: var(--lm-space-4);
  }

  .timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 0;
    border-left: 1px solid var(--lm-color-border-rule);
  }

  .timeline::before {
    left: -1.5px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: scaleY(var(--progress, 0.17));
    transform-origin: top;
  }

  .timeline [role="tab"] {
    padding: 0.625rem 0 0.625rem 1.25rem;
  }

  .timeline [role="tab"]::before {
    left: -0.3125rem;
    top: var(--lm-space-4);
  }

  .roles tbody th {
    width: 6.5rem;
  }
}

/* ---------- Pieces that move with a choice ---------- */

/* The binder assembling itself as the page opens: each dealt page lies on the one before, and a decision page
   carries its flag while it is on top. */
.leaf.is-dealt {
  display: block;
  visibility: visible;
}

.is-dealing .leaf-flag {
  transition: none;
}

.leaf.is-labelled .leaf-flag {
  opacity: 1;
  transform: none;
}

/* A page turn as a View Transition: only the leaf and the readout are captured, so the rest of the page stays live
   and nothing waits on it. --turn is 1 forwards and -1 back. */
:root.is-turning {
  view-transition-name: none;
}

.well-readout {
  view-transition-name: binder-readout;
}

::view-transition {
  pointer-events: none;
}

/* The page you leave goes first (160 ms), and only then does the next one come in (240 ms), so two dense report pages
   never show through each other. */
::view-transition-group(binder-leaf),
::view-transition-group(binder-readout) {
  animation-duration: calc(var(--lm-duration-4) / 2 + var(--lm-duration-3));
}

::view-transition-image-pair(binder-leaf) {
  isolation: auto;
}

::view-transition-old(binder-leaf) {
  animation: calc(var(--lm-duration-4) / 2) var(--ease-out) both leaf-away;
  mix-blend-mode: normal;
}

::view-transition-new(binder-leaf) {
  animation: var(--lm-duration-3) var(--ease-out) calc(var(--lm-duration-4) / 2) both leaf-in;
  mix-blend-mode: normal;
}

::view-transition-old(binder-readout) {
  animation: calc(var(--lm-duration-4) / 2) var(--ease-out) both leaf-fade-out;
}

::view-transition-new(binder-readout) {
  animation: var(--lm-duration-3) var(--ease-out) calc(var(--lm-duration-4) / 2) both leaf-fade-in;
}

@keyframes leaf-away {
  to {
    opacity: 0;
    transform: translateX(calc(var(--turn, 1) * -3%));
  }
}

@keyframes leaf-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--turn, 1) * 4%));
  }
}

@keyframes leaf-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes leaf-fade-in {
  from {
    opacity: 0;
  }
}

/* A saved entry carried along the thread from one colleague's study to the other's. */
.carried {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--lm-color-border-default);
  border-radius: var(--lm-radius-frame);
  background: var(--lm-color-bg-surface);
  box-shadow: var(--lm-shadow-popover);
  color: var(--lm-color-fg-default);
  font: 400 var(--lm-font-size-xs) / 1.35 var(--lm-font-family-ui);
  white-space: nowrap;
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  pointer-events: none;
}

/* The export's first rows arriving on a slip under the Data grid's import notice, then folding into it. */
.arriving {
  position: absolute;
  z-index: 3;
  display: grid;
  padding: 0.375rem 0.625rem;
  border-left: 3px solid var(--lm-color-bg-accent);
  border-radius: 0 0.375rem 0.375rem 0;
  background: var(--lm-color-bg-surface);
  box-shadow: var(--lm-shadow-popover);
  color: var(--lm-color-fg-default);
  font: 400 0.6875rem / 1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
  transform-origin: 0 0;
  pointer-events: none;
}

/* The corrected entry, lifted off the grid: the mistyped character drops away and the right one rises. */
.slip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 0.125rem;
  padding: 0.4375rem var(--lm-space-3) var(--lm-space-2) 0.625rem;
  border-left: 3px solid var(--lm-color-bg-accent);
  border-radius: 0 0.375rem 0.375rem 0;
  background: var(--lm-color-bg-surface);
  box-shadow: var(--lm-shadow-popover);
  pointer-events: none;
}

.slip-label {
  color: var(--lm-color-fg-muted);
  font: 400 var(--lm-font-size-2xs) / 1.3 var(--lm-font-family-ui);
}

.slip-value {
  color: var(--lm-color-fg-default);
  font: 600 var(--lm-font-size-lg) / 1.2 var(--lm-font-family-ui);
  font-variant-numeric: tabular-nums;
}

.slip-swap {
  position: relative;
  display: inline-block;
}

.slip-swap > span {
  display: inline-block;
}

.slip-swap > .slip-new {
  position: absolute;
  inset: 0;
  text-align: center;
}

/* ---------- Reduced motion: everything lands in place at once ---------- */

@media (prefers-reduced-motion: reduce) {
  .pd-chapters ol::after,
  .well-stack::before,
  .well-stack::after,
  .scope-canvas {
    transition: none;
  }

  .leaf.is-leaving,
  .leaf.is-entering,
  .scope-ring {
    transform: none;
  }

  /* Pages still turn and screens still change, by fading alone. */
  ::view-transition-old(binder-leaf) {
    animation-name: leaf-fade-out;
  }

  ::view-transition-new(binder-leaf) {
    animation-name: leaf-fade-in;
  }
}

/* ---------- Forced colours: rings, edges and marks keep their meaning in system colours ---------- */

@media (forced-colors: active) {
  .scope-ring,
  .leaf-ring,
  .leaf::after {
    border-color: Highlight;
  }

  .step::before,
  .toc-row::before,
  .drawer::before,
  .station::before,
  .timeline::before,
  .pd-chapters ol::after,
  .js .pd-tabs::after {
    forced-color-adjust: none;
    background: Highlight;
  }

  .pd-chapters a[aria-current],
  .drawer.is-current,
  .chip.is-current {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .outcome-not-met {
    border: 1px solid CanvasText;
  }

  .leaf,
  .scope {
    border: 1px solid CanvasText;
  }

  .tour .thread path {
    stroke: Highlight;
  }

  .tour .thread circle {
    fill: Highlight;
  }
}