/* View switchers.

   Two treatments live here. The first is the shared treatment of 30
   September 2026 for the groups that offer one choice at a time: open
   groups, rounded targets and one active dot. It still applies everywhere to
   the groups the redesign left out, which are the Timeline's views, the
   Claims-makers series stages and the Frames register tabs, and on the
   phone to every group, so that the phone keeps what it shipped with until
   it is seated on its own.

   The second is Vessel, chosen on 30 September 2026 from the fourth round of
   `previews/view-switcher/`, for the six groups that switch between views,
   lenses or families on a desktop: the Frames guide's lenses and the lens
   over its instrument, the Claims-makers lenses, Money's spending views and
   reading families, and the archive search's scope, together with every
   group that opts in through `.mhc-view-switcher`, as Measurement's evidence
   types have since 4 October. Each group stands in a
   housing of clear glass, the rail's own bevel rings and blur with almost
   none of its float colour, and the chosen word rides in a thumb of the
   same clear glass, the size of its target, that is seen by its edges and
   its light rather than by any fill: an outer hairline of the specular, an
   inner ring of compression, a highlight along its top, a shade along its
   bottom, a short cast on the field, and a sheen of the specular that
   glances across it where the pointer is. Nothing in either is the
   ground's white or black or the chapter's colour, since the author asked
   on 30 September for glass that is transparent, legible, liquid and
   dynamic; the word stays legible because it stands on the field itself,
   in full ink at the Emphasis weight. The words stand at one size
   in two weights, the resting word at the Label step and the chosen word at
   Emphasis. The cursor's Lumen fills the rounded target under the pointer;
   the thumb's rim catches that light on the side facing the pointer, the
   thumb leans three pixels toward a lit neighbour and gives under a press,
   and a choice sends it travelling on the archive's ease. The Summary's
   findings index is not a view switcher, since its four entries are one
   argument in sequence, and it carries the section register's beads
   instead, in `summary-chapter.css`.

   `view-switcher.js`, loaded before the chapter shell on every chapter,
   measures each group and writes what the sheet reads: the chosen target's
   box as --vs-il, --vs-it, --vs-iw and --vs-ih, the reach of the pool the
   pupil lays in it as --vs-reach, the pointer's place as --vs-mx and
   --vs-my, which target Lumen has lit as data-vs-lit with the direction
   toward it as --vs-pull-x and --vs-pull-y, a press as data-vs-pressing,
   and data-vs-live once it has run. Without it the chosen target paints the
   thumb on itself and nothing moves. Every rule of the second treatment
   stands aside on html.mhc-phone. */

/* ==== 1. The shared treatment ================================================= */
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
), html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) {
  gap:4px;
  padding:0;
  border:0;
  border-radius:0;
  background:var(--view-switch-ground,transparent);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a),
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a) {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:var(--view-justify,center);
  min-height:44px;
  padding:16px var(--view-padding-x,12px) 8px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--view-ink,var(--mhc-on-plate));
  box-shadow:none;
  text-decoration:none;
  transform:none;
  transition:background .18s ease,color .18s ease;
}
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a)::before,
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a)::before { content:none; }
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a)::after,
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a)::after {
  content:"";
  position:absolute;
  inset:6px auto auto 50%;
  width:5px;
  height:5px;
  margin:0;
  border:0;
  border-radius:50%;
  background:currentColor;
  box-shadow:none;
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a):is([aria-pressed="true"],[aria-selected="true"],[aria-current="step"],[aria-current="location"]),
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a):is([aria-pressed="true"],[aria-selected="true"],[aria-current="step"],[aria-current="location"]) {
  background:color-mix(in srgb,var(--view-ink,var(--mhc-on-plate)) 7%,transparent);
  color:var(--view-ink,var(--mhc-on-plate));
}
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a):is([aria-pressed="true"],[aria-selected="true"],[aria-current="step"],[aria-current="location"])::after,
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a):is([aria-pressed="true"],[aria-selected="true"],[aria-current="step"],[aria-current="location"])::after { opacity:1; }
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a):hover,
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a):hover { background:color-mix(in srgb,var(--view-ink,var(--mhc-on-plate)) 10%,transparent); }
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a):focus-visible,
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a):focus-visible { outline:2px solid currentColor;outline-offset:2px; }

.stage :is(.lens-bar,.era-index) { --view-ink:var(--light); }
.timeline-filter-drawer .view-switch { --view-ink:var(--mhc-on-paper); }
/* The Timeline window used to mark its view with a sliding pill of solid ink,
   and that pill still sits under the chosen word, which this treatment sets in
   the same ink, so the word vanished into it; the dot and the tint mark the
   choice here, and the pill stands down. */
.timeline-filter-drawer .view-switch > .timeline-filter-view-indicator { display:none; }
.evidence-workbench .mode-tabs { --view-ink:var(--desk-ink); }
:is(.spending-switch,.atlas-series) { --view-ink:var(--mhc-ink); }
#sec-frames :is(.frame-cut,.frame-framework-filter-tabs,.frame-framework-switcher) { --view-ink:var(--frame-ink); }
/* The compact Frames guide preserves its three-column footprint on the phone. */
html.mhc-phone #sec-frames .frame-framework-switcher { --view-padding-x:5px; }
@media(max-width:700px) {
  html.mhc-phone #stage .era-index { --view-padding-x:4px; }
}
@media(prefers-reduced-motion:reduce) {
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a),
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a),
html body :is(
  .stage .era-index,
  .timeline-filter-drawer .view-switch,
  .view-switch,
  #sec-frames .frame-framework-filter-tabs
) > :is(button,a)::after,
html.mhc-phone body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button,a)::after { transition:none; }
}

/* ==== 2. Vessel =============================================================== */

/* What the runtime moves on a transition: the pointer's place, so that a mark
   reading it follows a little behind as the pupil's own pool does, the pull
   toward a lit neighbour, and the thumb's own scale, which is kept inside its
   transform after the translation, because an individual scale or rotate is
   applied before the transform property and would scale or swing the thumb's
   whole offset with it. */
@property --vs-mx { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --vs-my { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --vs-pull-x { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --vs-pull-y { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --vs-sx { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --vs-sy { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --vs-sheen-x { syntax: '<percentage>'; inherits: false; initial-value: 32%; }

/* ---- the housing ---- */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) {
  --vs-ink: var(--mhc-on-plate, var(--mhc-ink));
  --vs-field: var(--mhc-chapter-field, var(--mhc-accent));
  --vs-ease: cubic-bezier(.16, 1, .3, 1);
  /* A solid mark takes the chapter's colour drawn toward the ink it stands
     beside, so that it deepens on paper and pales on black; an area of light
     takes the chapter's own hue, and a room standing on that hue, as Frames
     does, draws it toward the ink. */
  --vs-light: color-mix(in srgb, var(--vs-field) 58%, var(--vs-ink));
  --vs-glow: color-mix(in srgb, var(--vs-field) var(--vs-glow-mix, 100%), var(--vs-ink));
  --vs-house-radius: 999px;
  --vs-float-rgb: var(--mhc-float-rgb, var(--mhc-ground-rgb));
  --vs-spec-rgb: var(--elastic-glass-spec-rgb, 255, 255, 255);
  --vs-spec: var(--elastic-glass-spec, 1);
  /* The light a rim catches is the pupil's own, which is the accent
     everywhere but on the accent field, where the pupil lights in white. */
  --vs-rim-rgb: var(--mhc-accent-rgb);
  /* Clear glass. The thumb's body is the specular at a twentieth and the
     field seen through a lens, and what makes it an object is its edges: an
     outer hairline of the specular, an inner ring of compression, which is
     what lets it be seen on paper where a white hairline cannot, a highlight
     along its top, a shade along its bottom, and a short cast. The housing
     is the same glass with a trace of the float colour so that it reads as a
     surface and not as a line. */
  --vs-d-glass:
    radial-gradient(120% 108% at 50% 50%,
      rgba(var(--vs-spec-rgb), 0) 58%,
      rgba(var(--vs-spec-rgb), calc(.06 * var(--vs-spec))) 90%,
      rgba(var(--vs-spec-rgb), calc(.14 * var(--vs-spec))) 100%),
    linear-gradient(140deg,
      rgba(var(--vs-spec-rgb), calc(.07 * var(--vs-spec))),
      rgba(var(--vs-spec-rgb), calc(.03 * var(--vs-spec))));
  --vs-d-house:
    radial-gradient(120% 108% at 50% 50%,
      rgba(var(--vs-spec-rgb), 0) 58%,
      rgba(var(--vs-spec-rgb), calc(.06 * var(--vs-spec))) 90%,
      rgba(var(--vs-spec-rgb), calc(.13 * var(--vs-spec))) 100%),
    linear-gradient(140deg, rgba(var(--vs-float-rgb), .16), rgba(var(--vs-float-rgb), .08));
  --vs-d-bevel:
    inset 0 0 0 1px rgba(var(--vs-spec-rgb), calc(.62 * var(--vs-spec))),
    inset 0 0 0 2.5px rgba(var(--mhc-shadow-rgb), .1),
    inset 0 1px 0 rgba(var(--vs-spec-rgb), calc(.5 * var(--vs-spec))),
    inset 0 2.5px 2px -1px rgba(var(--vs-spec-rgb), calc(.3 * var(--vs-spec))),
    inset 0 -2.5px 2px -1px rgba(var(--mhc-shadow-rgb), .09),
    0 10px 24px rgba(var(--mhc-shadow-rgb), .14),
    0 1px 2px rgba(var(--mhc-shadow-rgb), .1);
  isolation: isolate;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: var(--vs-house-radius);
  background: var(--vs-d-house);
  box-shadow:
    var(--elastic-capsule-bevel, inset 0 0 0 .75px rgba(var(--vs-spec-rgb), calc(.44 * var(--vs-spec)))),
    0 10px 26px rgba(var(--mhc-shadow-rgb), .07),
    0 1px 2px rgba(var(--mhc-shadow-rgb), .06);
  backdrop-filter: var(--elastic-capsule-blur, blur(24px) saturate(150%));
  -webkit-backdrop-filter: var(--elastic-capsule-blur, blur(24px) saturate(150%));
}
/* One line of words is a pill; a stack or a wrapped row takes a softer corner. */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
)[data-vs-lines]:not([data-vs-lines="1"]) { --vs-house-radius: 22px; }

/* Each room's ink and colour. */
html:not(.mhc-phone) body .stage .lens-bar { --vs-ink: var(--light); --vs-field: var(--mhc-chapter-claims-field); }
html:not(.mhc-phone) body :is(.spending-switch, .atlas-series) { --vs-ink: var(--mhc-ink); --vs-field: var(--mhc-chapter-money-field); }
html:not(.mhc-phone) body #sec-frames :is(.frame-cut, .frame-framework-switcher) { --vs-ink: var(--frame-ink); --vs-field: var(--mhc-chapter-frames-field); --vs-glow-mix: 45%; --vs-rim-rgb: 255, 255, 255; }
html:not(.mhc-phone) body .search-mode-switch { --vs-ink: var(--mhc-on-paper); --vs-field: var(--mhc-chapter-sources-field); }

/* ---- the targets: rounded words, one size, two weights ---- */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button, a) {
  --vs-rest: color-mix(in srgb, var(--vs-ink) 72%, transparent);
  --vs-hover: color-mix(in srgb, var(--vs-ink) 92%, transparent);
  --vs-chosen: var(--vs-ink);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: var(--view-justify, center);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--vs-rest);
  font-weight: 500;
  text-decoration: none;
  transform: none;
  overflow: visible;
  transition: color .22s ease;
}
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button, a)::before,
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button, a)::after { content: none; }
/* A label element inside a target follows the target's weight; a count or an
   ordinal beside it keeps its own. */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button, a) :is(span, b) { font-weight: inherit; }
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])) {
  --mhc-ink-rgb: inherit;
  --mhc-on-plate-rgb: inherit;
  --mhc-on-paper-rgb: inherit;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--vs-chosen);
  font-weight: 600;
  transform: none;
}
/* The surface under the pointer, written flat so that the Lumen pass can
   split it: with a fine pointer it stands aside and the pupil's pool fills the
   rounded target instead; on a coarse one it shows as itself. */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button, a):hover {
  background: color-mix(in srgb, var(--vs-ink) 7%, transparent);
  border-color: transparent;
  box-shadow: none;
  color: var(--vs-hover);
  transform: none;
}
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])):hover { color: var(--vs-chosen); }
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > :is(button, a):focus-visible {
  outline: 2px solid var(--vs-light);
  outline-offset: 2px;
  box-shadow: none;
}
/* Money's two spending views were 48px tall as a bar over a rule; inside a
   capsule they take the height of a rail well. */
html:not(.mhc-phone) body .spending-switch { width: max-content; max-width: 100%; grid-template-columns: repeat(2, max-content); }
html:not(.mhc-phone) body .spending-switch > button { height: 40px; min-height: 40px; }
/* The Frames guide sizes its three lenses to their words wherever the
   switcher hangs apart from the question, as it does from the stage's corner
   when motion is reduced. In the scrolled stage, however, the switcher stands
   directly over the question that the chosen lens asks, and so, at the
   author's request on 4 October, its housing there takes the width of that
   question's longest line and divides it into three equal cells. The guide's
   script publishes that width as `--framework-question-w`, and until it has
   measured, or wherever the question would be the shorter of the two, the
   housing keeps the width of its words. */
html:not(.mhc-phone) body #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher,
html:not(.mhc-phone) body #sec-frames .frame-framework-switcher { width: max-content; max-width: none; grid-template-columns: repeat(3, max-content); column-gap: 2px; }
html:not(.mhc-phone) body #sec-frames .frame-framework-switcher > button { min-width: 0; padding: 7px 14px; }
html:not(.mhc-phone) body #sec-frames .frame-framework-guide.is-stack-ready.is-motion-ready .frame-framework-switcher { width: var(--framework-question-w, max-content); min-width: max-content; grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
/* The three questions wrap to different lengths, and the housing takes each
   new width at the moment its lens is chosen. It does not ease there, because
   an eased width would make the runtime re-measure the group on every frame
   of the deck's handover, whereas one change still lets the thumb glide on
   its own transitions. */
/* The Claims-makers lens bar takes the height of a rail well, and on a wide
   screen its label "View", a child of the bar set at its top with the buttons
   pushed down to make room, stands above the housing instead, where the
   housing's hairline cannot run through the word. */
html:not(.mhc-phone) body .stage .lens-bar > button { min-height: 40px; }
html:not(.mhc-phone) body .stage .constellation-footer .lens-bar { margin-top: 10px; }
html:not(.mhc-phone) body .stage .constellation-footer .lens-bar > button { margin-top: 0; }
html:not(.mhc-phone) body .stage .constellation-footer .lens-bar-label { top: auto; bottom: calc(100% + 6px); }
/* Measurement's evidence types keep their three equal cells across the full
   width of the desk, at the author's request on 4 October, so the thumb takes
   the width of a whole cell, while the targets take the height of a rail
   well; a desk too narrow to hold the three words on one line keeps its own
   taller cells, in which the words wrap. */
@container measurement-desk (min-width: 601px) {
  html:not(.mhc-phone) body .evidence-workbench .mode-tabs > .mode-tab { height: 40px; min-height: 40px; padding: 0 18px; white-space: nowrap; }
}
/* A thumb the width of a whole cell, leaning three pixels and stretching by
   the share a word-sized thumb takes, would cross the 4px gap and stand over
   the lit neighbour's light by several pixels, so here the lean and the
   stretch each carry the edge about a pixel, which keeps it inside its half
   of the gap. */
html:not(.mhc-phone) body .evidence-workbench .mode-tabs { --vs-lean: 1px; --vs-give: .006; }

/* ---- the thumb ---- */
.mhc-view-thumb {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  opacity: 0;
}
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > .mhc-view-thumb {
  width: var(--vs-iw, 0px);
  height: var(--vs-ih, 0px);
  border-radius: 999px;
  background: var(--vs-d-glass);
  box-shadow: var(--vs-d-bevel);
  /* The lens: what stands behind the thumb is seen through it a little
     brighter and a little richer, which is what a clear glass does to a
     field. */
  backdrop-filter: blur(10px) saturate(165%) brightness(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(165%) brightness(1.05);
  /* The give under a press, the stretch toward a lit neighbour and the
     settle of the travel are scaled after the translation, inside the one
     transform; the lean toward the lit neighbour is a translation and so
     composes either way. A release springs back a little past rest. */
  transform: translate3d(var(--vs-il, 0px), var(--vs-it, 0px), 0) scale(var(--vs-sx), var(--vs-sy));
  translate: calc(var(--vs-pull-x) * var(--vs-lean, 3px)) calc(var(--vs-pull-y) * var(--vs-lean, 3px));
  transition:
    transform .58s var(--vs-ease), width .58s var(--vs-ease), height .58s var(--vs-ease),
    translate .5s var(--vs-ease), --vs-sx .42s cubic-bezier(.2, 1.5, .4, 1), --vs-sy .42s cubic-bezier(.2, 1.5, .4, 1), opacity .3s ease,
    --vs-pull-x .5s var(--vs-ease), --vs-pull-y .5s var(--vs-ease),
    --vs-mx .14s linear, --vs-my .14s linear;
}
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
)[data-vs-live][data-vs-has] > .mhc-view-thumb { opacity: 1; }
/* Pulled toward the lit neighbour, the glass stretches a little that way.
   A group may set the lean as --vs-lean and the stretch as --vs-give, and one
   whose targets are wide does, because the stretch is a share of the thumb's
   width and would otherwise carry its edge across the gap and over the lit
   neighbour. */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
)[data-vs-lit]:not([data-vs-lit-self]) > .mhc-view-thumb { --vs-sx: calc(1 + abs(var(--vs-pull-x)) * var(--vs-give, .035)); --vs-sy: calc(1 + abs(var(--vs-pull-y)) * var(--vs-give, .035)); }
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
)[data-vs-pressing] > .mhc-view-thumb { --vs-sx: .96; --vs-sy: .96; transition-timing-function: var(--vs-ease); }
/* The sheen: a streak of the specular glancing across the glass, standing at
   the thumb's upper third at rest and following the pointer a little behind
   whenever the light is on the group. */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > .mhc-view-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  --vs-sheen-x: 32%;
  background:
    radial-gradient(ellipse 58% 70% at var(--vs-sheen-x) 0%,
      rgba(var(--vs-spec-rgb), calc(.34 * var(--vs-spec))) 0,
      rgba(var(--vs-spec-rgb), calc(.1 * var(--vs-spec))) 45%,
      rgba(var(--vs-spec-rgb), 0) 100%),
    radial-gradient(ellipse 50% 50% at calc(100% - var(--vs-sheen-x)) 100%,
      rgba(var(--vs-spec-rgb), calc(.12 * var(--vs-spec))) 0,
      rgba(var(--vs-spec-rgb), 0) 100%);
  transition: --vs-sheen-x .5s var(--vs-ease), opacity .3s ease;
}
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
)[data-vs-lit] > .mhc-view-thumb::before { --vs-sheen-x: clamp(12%, calc((var(--vs-mx) - var(--vs-il, 0px)) / var(--vs-iw, 1px) * 100%), 88%); }
/* The rim catching the pupil's light: a bloom of the accent centred on the
   pointer and cut to the ring by the same mask Lumen cuts its own edge with. */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > .mhc-view-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid transparent;
  border-radius: inherit;
  background: radial-gradient(circle calc(var(--vs-reach, 60px) * 2.2)
      at calc(var(--vs-mx) - var(--vs-il, 0px)) calc(var(--vs-my) - var(--vs-it, 0px)),
    rgba(var(--vs-rim-rgb), .95) 0,
    rgba(var(--vs-rim-rgb), .38) 45%,
    rgba(var(--vs-rim-rgb), 0) 100%) border-box;
  background-origin: border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .22s ease;
}
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
)[data-vs-lit] > .mhc-view-thumb::after { opacity: 1; }
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
) > .mhc-view-thumb.is-travelling { animation: mhc-view-thumb-carry .58s var(--vs-ease); }
/* The glass stretches along its way, overshoots as it lands and settles, as
   a drop does. */
@keyframes mhc-view-thumb-carry {
  0% { --vs-sx: 1; --vs-sy: 1; }
  40% { --vs-sx: 1.07; --vs-sy: .93; }
  72% { --vs-sx: .975; --vs-sy: 1.035; }
  100% { --vs-sx: 1; --vs-sy: 1; }
}
/* Held in place, when the runtime is absent. */
html:not(.mhc-phone) body :is(
  .stage .lens-bar,
  .spending-switch,
  .mhc-view-switcher,
  .atlas-series,
  .search-mode-switch,
  #sec-frames .frame-cut,
  #sec-frames .frame-framework-guide.is-stack-ready:is(.is-motion-ready,:not(.is-motion-ready)) .frame-framework-switcher
):not([data-vs-live]) > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])) {
  background: var(--vs-d-glass);
  box-shadow: var(--vs-d-bevel);
}

@media (prefers-reduced-motion: reduce) {
  .mhc-view-thumb, .mhc-view-thumb::after { transition: none !important; animation: none !important; }
}