/* ===========================================================================
   rail-dock: the archive spine as an instrument the reader can move
   ---------------------------------------------------------------------------
   The shared rail was authored against the left edge, and every chapter's
   reading canvas was composed around that decision: the body reserves the
   rail's width as a left padding, the full-bleed heroes escape that padding
   with a negative margin of exactly the same size, and the section navigator
   grows out of the identity capsule towards the middle of the page. Because a
   reader may be working on a wide screen where the left edge is far from the
   text, or on a short one where a horizontal bar leaves more room for the
   record than a column does, the dock is now a preference rather than a
   constant, and this file holds the whole of that preference.

   THREE DOCKS, AND WHAT EACH ONE COSTS THE PAGE

   left     The authored composition, unchanged. The reading canvas is inset by
            the rail's claim, the heroes bleed back across it, and the chapter
            field runs underneath the glass.
   right    The mirror. Since --elastic-content-left falls to zero, every
            negative margin derived from it falls to zero with it, so nothing
            escapes a padding that is no longer there; the reservation moves to
            the right instead, and the two rules that state a literal 100vw are
            returned to the width of the canvas so the page cannot scroll
            sideways.
   bottom   The rail turns. Its column becomes a row, its identity label stops
            reading vertically, its section navigator opens upward rather than
            outward, and the reservation becomes a foot margin that the
            bottom-anchored controls of the chapters are lifted clear of.

   WHY THE GEOMETRY IS DERIVED RATHER THAN RESTATED

   elastic-archive-shell.css now publishes --elastic-rail-claim, which is the
   rail's width plus its offset and which agrees with the literal reservation
   each compact breakpoint declares for itself. Therefore a dock can move the
   reservation from one edge to another by naming that single quantity, and a
   later change to the rail's width reaches all three docks at once instead of
   reaching only the one whose numbers were written out by hand.

   THE HANDLE IS A SEPARATE CONTROL ON PURPOSE

   The capsules already carry three gestures between them: the menu toggle
   holds for 1.75 seconds to return home, the identity holds for 1.5 seconds to
   pin the rail, and the identity also opens the section navigator on approach.
   Adding a drag to any of those would mean disambiguating a press by distance
   and by time at once, which is exactly the kind of gesture that fails under
   the hand of a reader who is merely resting a finger. So the drag is given
   its own handle at the head of the rail, where a toolbar's grip has always
   been, and that handle is a real button so the dock can also be moved from
   the keyboard.
   =========================================================================== */

:root{
  /* The handle's thickness across the rail's short axis. Everything measured
     from the head of the rail carries it through --elastic-rail-head, which
     stays at zero until rail-dock.js has actually mounted the handle. */
  --elastic-rail-grip:calc(18px * var(--elastic-rail-scale));
  /* Docked at the foot the rail keeps its control size and both of its
     paddings, so the bar is exactly as thick as the column was wide and the
     capsules do not change size when the dock changes. Since the bar's length
     is what its height was when it was standing, it carries the same factor
     the column does. */
  --elastic-rail-bar-height:var(--elastic-rail-width);
  --elastic-rail-bar-claim:calc(var(--elastic-rail-bar-height) + var(--elastic-rail-left));
  --elastic-rail-bar-length:min(calc(640px * var(--elastic-rail-scale)),calc(100vw - (2 * var(--elastic-rail-left)) - 20px));
  /* Chapters anchor a continue cue, a return capsule and a filter cluster to
     the foot of the viewport. Each of them adds this clearance, which is zero
     for both of the vertical docks. */
  --mhc-rail-bottom-clearance:0px;
  --rail-dock-settle:520ms;
  --rail-dock-lift:160ms;
}

html.mhc-rail-dock-ready{
  --elastic-rail-head:calc(var(--elastic-rail-grip) + var(--elastic-rail-gap));
}

/* ---------------------------------------------------------------------------
   The handle
   ------------------------------------------------------------------------ */

.mhc-rail-grip{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  background:none;
  color:var(--elastic-light);
  cursor:grab;
  /* The browser must not claim the gesture for a scroll, or the first few
     pixels of every drag are eaten before the pointer events arrive. */
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
/* The handle is the pin as well as the grip since 28 September: it carries
   the pin glyph the identity used to carry, upright while the bar is pinned
   and tilted while it is not, so the one control that is about where the bar
   stands says whether the bar will stay there. Three dots would have read as
   a divider between the handle and the menu capsule, and a bare bar the same. */
.mhc-rail-grip-pin{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
:is(.archive-rail,.mhc-archive-rail) .mhc-rail-grip-pin{width:18px;height:18px;stroke-width:1.6}
.mhc-rail-grip-glyph{
  transform:rotate(-32deg);
  transform-origin:16px 16px;
  opacity:.42;
  transition:transform .24s var(--elastic-ease),opacity .2s ease;
}
body.mhc-rail-pinned .mhc-rail-grip-glyph{transform:rotate(0);opacity:.9}
.mhc-rail-grip:is(:hover,:focus-visible) .mhc-rail-grip-glyph{opacity:1}
.mhc-rail-grip:active .mhc-rail-grip-glyph{transform:rotate(0) scale(.86);transition-duration:.12s}
/* The visible handle is 18px across, which no pointer and certainly no finger
   can be asked to find. The target is grown to the gap on either side of it,
   stopping exactly at the menu capsule's edge so the two never overlap. */
.mhc-rail-grip::after{
  content:"";
  position:absolute;
  inset:-10px -6px;
}
.mhc-rail-grip:focus-visible{outline:2px solid var(--elastic-light);outline-offset:1px;border-radius:999px}
:root[data-rail-dock="bottom"] .mhc-rail-grip::after{inset:-6px -10px}
/* The identity's own pin indicator stands down once the handle carries the
   pin, and the room the label kept clear of it at the head of the capsule is
   returned to the label. */
html.mhc-rail-dock-ready .mhc-rail-pin-indicator{display:none}
html.mhc-rail-dock-ready :is(.archive-rail,.mhc-archive-rail)>[data-rail-pinned]>.mhc-rail-section-rest{top:12px}
html.mhc-rail-dock-ready:not([data-rail-dock="top"]) :is(.archive-rail,.mhc-archive-rail)>[data-rail-pinned]>.mhc-rail-section-rest{top:12px}

/* ---------------------------------------------------------------------------
   The room, inside the menu control
   ---------------------------------------------------------------------------
   The chapter area is the menu: the control that opens the rooms carries the
   room the reader is in, as its mark in a ring that fills with the share of
   the room read. On every dock the ring stands where the two bars of the menu
   glyph stood; along the top the room's name rolls out beside it. The glyph's
   close and home readings keep their places over the ring, since a press
   still opens the rooms and a hold still returns home.
   ------------------------------------------------------------------------ */
.rail-room{display:none}
html.mhc-rail-dock-ready .rail-room{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  height:100%;
  padding:0 2px;
  pointer-events:none;
}
.rail-room-ring{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:26px;
  height:26px;
}
.rail-room-ring>svg{position:absolute;inset:0;width:100%!important;height:100%!important;overflow:visible;transform:rotate(-90deg)}
.rail-room-track{fill:none;stroke:color-mix(in srgb,currentColor 16%,transparent);stroke-width:2}
.rail-room-meter{
  fill:none;
  stroke:var(--mhc-rail-room-ink,var(--mhc-rail-section-accent,var(--mhc-accent-ink)));
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:100 100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset .5s var(--elastic-ease);
}
.rail-room-no{
  position:relative;
  font:600 var(--mhc-type-2xs,10px)/1 var(--mono,"Geist Mono",ui-monospace,monospace);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:currentColor;
}
.rail-room-name{
  display:block;
  width:0;
  overflow:hidden;
  opacity:0;
  color:currentColor;
  font:500 13px/30px var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
  letter-spacing:-.012em;
  white-space:nowrap;
  transition:opacity .3s ease;
}
.rail-room-name>span{display:block;width:max-content;padding:0 12px 0 8px}
/* The menu glyph gives its place to the ring; its close and home readings
   come up over the ring, which folds away for as long as they are showing. */
html.mhc-rail-dock-ready :is(#menu-toggle,#mhc-menu-toggle) :is(.menu-icon--menu,.mhc-menu-icon--menu){opacity:0!important}
html.mhc-rail-dock-ready :is(#menu-toggle,#mhc-menu-toggle):is(.is-home-ready,.is-complete) .rail-room-ring,
html.mhc-rail-dock-ready body:is(.drawer-open,.mhc-nav-open) :is(#menu-toggle,#mhc-menu-toggle):not(.is-home-ready,.is-complete) .rail-room-ring{opacity:0;transition:opacity .16s ease}
html.mhc-rail-dock-ready body:is(.drawer-open,.mhc-nav-open) :is(#menu-toggle,#mhc-menu-toggle):not(.is-home-ready,.is-complete) :is(.menu-icon--close,.mhc-menu-icon--close){opacity:1;transform:none;filter:blur(0)}
.rail-room-ring{transition:opacity .2s ease}

/* ---------------------------------------------------------------------------
   Dock: top · the bar as a sentence
   ---------------------------------------------------------------------------
   The default since 28 September. One capsule of glass rests against the top
   edge and is read from left to right as the place the reader is in: the
   archive, the room, the section, and then the tools. Each part is a well
   pressed into the same glass. The wordmark is the masthead's line seated in
   the capsule, so the masthead stands down and becomes a soft edge for the
   reading to dissolve into; the room well is the menu control, its ring
   filling as the room is read, its name folding while the reader is on a
   downward run; the section well is the identity, showing the section as a
   counter that rolls with the reading, and unfolding the register as a leaf
   of the room's sections when it is reached; the way back, search, the top
   of the page and the appearance control are the tail, and the handle is
   the pin at its end. The page takes the whole width, since no column stands
   at its side, and every room that begins below the header reads the bar's
   band through the masthead's own variable.
   ------------------------------------------------------------------------ */

:root{
  --elastic-rail-top-inset:10px;
  --elastic-rail-top-height:38px;
  --elastic-rail-top-well:30px;
  /* The capsule is as long as its contents; this is the length the drag's
     footprint assumes for it while the bar stands elsewhere. */
  --elastic-rail-top-length:min(620px,calc(100vw - 40px));
  --elastic-rail-top-band:calc(var(--elastic-rail-top-inset) + var(--elastic-rail-top-height) + 10px);
  /* A well pressed into the glass, and the lens it rises to on approach,
     which is the capsules' own hover material with its cast reduced to a
     contact shadow. */
  --elastic-rail-well:rgba(var(--mhc-shadow-rgb),.075);
  --elastic-rail-well-shadow:
    inset 0 1.5px 3px rgba(var(--mhc-shadow-rgb),.24),
    inset 0 -1px 0 rgba(var(--elastic-glass-spec-rgb),calc(.24 * var(--elastic-glass-spec))),
    inset 0 0 0 .5px rgba(var(--mhc-shadow-rgb),.10);
  --elastic-rail-lens:linear-gradient(140deg,rgba(var(--mhc-float-rgb),.62),rgba(var(--mhc-float-rgb),.40));
  --elastic-rail-lens-shadow:
    0 2px 6px rgba(var(--mhc-shadow-rgb),.12),
    inset 0 0 0 1px rgba(var(--elastic-glass-spec-rgb),calc(.46 * var(--elastic-glass-spec))),
    inset 0 0 0 2.5px rgba(var(--mhc-shadow-rgb),.07),
    inset 0 2.5px 1.5px -1px rgba(var(--elastic-glass-spec-rgb),calc(.60 * var(--elastic-glass-spec))),
    inset 0 -2.5px 1.5px -1px rgba(var(--elastic-glass-spec-rgb),calc(.26 * var(--elastic-glass-spec)));
  /* A spring written out as a linear() easing, damped at .82, so a well
     changing its length can overshoot and settle in CSS alone. */
  --elastic-glide:linear(0, 0.004 1.1%, 0.025 2.8%, 0.068 4.9%, 0.133 7.2%, 0.215 9.8%, 0.310 12.5%, 0.411 15.4%, 0.512 18.4%, 0.608 21.6%, 0.696 24.9%, 0.773 28.3%, 0.838 31.9%, 0.890 35.5%, 0.930 39.2%, 0.961 43.1%, 0.982 47.0%, 0.996 51.0%, 1.005 55.1%, 1.009 59.2%, 1.011 63.5%, 1.011 67.8%, 1.010 72.2%, 1.008 76.7%, 1.006 81.2%, 1.005 85.8%, 1.003 90.5%, 1.002 95.2%, 1);
}
/* A hand needs a well it can find. */
@media(hover:none){
  :root{--elastic-rail-top-height:50px;--elastic-rail-top-well:44px}
}

:root[data-rail-dock="top"]{
  --elastic-content-left:0px;
  --elastic-content-half:0px;
  --elastic-page-safe-left:var(--elastic-rail-free-inset);
  --elastic-page-safe-half:calc(var(--elastic-rail-free-inset) / 2);
  --elastic-copy-safe-left:var(--elastic-rail-free-inset);
  --archive-masthead-band:var(--elastic-rail-top-band);
  --elastic-drawer-origin-x:50vw;
  --elastic-drawer-origin-y:calc(var(--elastic-rail-top-inset) + (var(--elastic-rail-top-height) / 2));
  --elastic-search-origin-x:50vw;
  --elastic-search-origin-y:var(--elastic-drawer-origin-y);
}

:root[data-rail-dock="top"] body.mhc-archive-enabled{padding-left:0}
:root[data-rail-dock="top"] body:not(.mhc-archive-enabled)>.site-shell{margin-left:0}
:root[data-rail-dock="top"] body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames,
:root[data-rail-dock="top"] body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary{padding-left:0}
:root[data-rail-dock="top"] body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero,
:root[data-rail-dock="top"] body.mhc-archive-enabled.chapter-reading>.site-shell>.chapter-hero{
  width:100%;
  margin-left:0;
  padding-left:max(var(--elastic-copy-safe-left),var(--gutter,0px));
}
:root[data-rail-dock="top"] .mhc-archive-enabled .prog{
  left:var(--elastic-page-safe-left);
  width:calc(100% - var(--elastic-page-safe-left) - var(--elastic-rail-free-inset));
}
:root[data-rail-dock="top"] .skip-link{left:var(--elastic-rail-free-inset)}

/* ---- the capsule ---------------------------------------------------------- */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail){
  left:50%;
  right:auto;
  top:var(--elastic-rail-top-inset);
  bottom:auto;
  width:max-content;
  max-width:calc(100vw - 24px);
  height:var(--elastic-rail-top-height);
  display:flex;
  align-items:center;
  gap:2px;
  padding:0 4px;
  border-radius:var(--elastic-pill);
  background:var(--elastic-capsule-surface);
  box-shadow:var(--elastic-capsule-shadow);
  backdrop-filter:var(--elastic-capsule-blur);
  -webkit-backdrop-filter:var(--elastic-capsule-blur);
  transform:translateX(-50%);
  transition:transform .5s var(--elastic-ease),box-shadow .3s ease;
}
html.mhc-wayfinding-ready .mhc-rail-grip{order:9;width:22px;height:var(--elastic-rail-top-well);margin-left:2px;color:var(--mhc-ink)}
html.mhc-wayfinding-ready .mhc-rail-grip::after{inset:-8px -4px}
html.mhc-wayfinding-ready .rail-home{order:1}
html.mhc-wayfinding-ready :is(#menu-toggle,#mhc-menu-toggle){order:2}
html.mhc-wayfinding-ready :is(.archive-rail>.rail-index,.archive-rail>.rail-mark,.mhc-archive-rail>.mhc-rail-identity){order:3}
html.mhc-wayfinding-ready :is(.chapter-search,#search-toggle,#mhc-search-toggle){order:4;margin-left:2px}
html.mhc-wayfinding-ready .rail-way{order:5}
html.mhc-wayfinding-ready :is(.archive-rail>.rail-top,.mhc-archive-rail>.mhc-rail-top){order:6}
html.mhc-wayfinding-ready .rail-appearance{order:7;margin-left:2px}

/* ---- the wells ------------------------------------------------------------- */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.rail-index,.rail-mark,.mhc-rail-action,.mhc-rail-identity,.mhc-rail-grip){
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  grid-row:auto;
  grid-column:auto;
  width:auto;
  min-width:var(--elastic-rail-top-well);
  height:var(--elastic-rail-top-well);
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:var(--elastic-pill);
  background:var(--elastic-rail-well);
  color:var(--mhc-ink);
  box-shadow:var(--elastic-rail-well-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:1;
  transform:none;
  cursor:pointer;
  transition:background .22s ease,box-shadow .3s ease,color .2s ease,transform .38s var(--elastic-ease),opacity .3s ease;
}
/* Keep hover explicit so the shared light can recognize both tool surfaces. */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.mhc-rail-action,.mhc-rail-grip):hover,
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.mhc-rail-action,.mhc-rail-grip):focus-visible{
  background:var(--elastic-rail-lens);
  box-shadow:var(--elastic-rail-lens-shadow);
  color:var(--mhc-ink);
  transform:none;
}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.mhc-rail-action,.mhc-rail-grip):active{transform:scale(.92)}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.mhc-rail-action,.mhc-rail-grip):focus-visible{outline:2px solid var(--mhc-ink);outline-offset:2px}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.mhc-rail-action)>svg{
  position:relative;
  width:16px;
  height:16px;
  stroke-width:1.5;
}
/* The menu control's three glyphs and the hold's fill are placed by the
   chapter's own rules on the centre of a round capsule; here the centre they
   want is the ring's. */
html.mhc-wayfinding-ready :is(#menu-toggle,#mhc-menu-toggle) :is(.menu-icon,.mhc-menu-icon){position:absolute;left:17px;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;stroke-width:1.5}
html.mhc-wayfinding-ready :is(#menu-toggle,#mhc-menu-toggle) :is(.menu-hold-fill,.mhc-menu-hold-fill){border-radius:inherit}
html.mhc-wayfinding-ready :is(#menu-toggle,#mhc-menu-toggle){padding:0}
html.mhc-wayfinding-ready .rail-room-name{width:var(--rail-room-name-w,auto);opacity:1}
/* Over a cover the room folds to its ring, since the cover names the room at
   display size a few lines below. */

/* ---- the archive's name ------------------------------------------------------ */
.rail-home{display:none}
html.mhc-wayfinding-ready .rail-home{
  display:block;
  flex:0 0 auto;
  height:var(--elastic-rail-top-well);
  padding:0 11px 0 13px;
  border-radius:var(--elastic-pill);
  color:var(--mhc-ink);
  font:var(--mhc-weight-bold,600) 15px/var(--elastic-rail-top-well) var(--mhc-font-sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
  letter-spacing:-.064em;
  white-space:nowrap;
  text-decoration:none;
  transition:background .22s ease,box-shadow .3s ease;
}
html.mhc-wayfinding-ready .rail-home i{margin-right:.28em;font-size:1em;font-style:italic;font-weight:350;letter-spacing:-.048em}
html.mhc-wayfinding-ready .rail-home b{font-weight:inherit;color:var(--mhc-accent-ink)}
@supports (color:oklch(from white l c h)){
  html.mhc-field-on.mhc-wayfinding-ready .rail-home b{color:oklch(from var(--mhc-accent-ink) calc(l - var(--archive-masthead-crisis-shift,0)) c h)}
}
html.mhc-wayfinding-ready .rail-home:is(:hover,:focus-visible){background:var(--elastic-rail-lens);box-shadow:var(--elastic-rail-lens-shadow);outline:none}
html.mhc-wayfinding-ready .rail-home:focus-visible{box-shadow:var(--elastic-rail-lens-shadow),0 0 0 2px var(--mhc-accent-ink)}
@media(max-width:1000px){
  html.mhc-wayfinding-ready .rail-home i{display:inline}
}

/* ---- the section: a counter that rolls ---------------------------------------- */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity)[hidden]{display:none!important}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){
  overflow:visible;
  width:var(--mhc-counter-w,auto);
  min-width:var(--elastic-rail-top-well);
  isolation:auto;
}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity).is-empty{
  width:0;
  min-width:0;
  margin-left:-2px;
  opacity:0;
  pointer-events:none;
}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity)>.mhc-rail-section-rest,
html.mhc-wayfinding-ready :is(.rail-progress,.mhc-rail-progress,.rail-mark-progress),
html.mhc-wayfinding-ready .rail-index>span:not(.mhc-rail-section-rest):not(.mhc-rail-counter),
html.mhc-wayfinding-ready .mhc-rail-identity>.mhc-rail-label,
html.mhc-wayfinding-ready .rail-mark>:is(.rail-mark-archive,.rail-mark-chapter,.rail-mark-timeline){display:none!important}
.mhc-rail-counter{display:none}
html.mhc-wayfinding-ready .mhc-rail-counter{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}
/* The item is a span inside the identity, and a chapter may set every span
   there vertical and turned, so its placement carries the flag. */
.mhc-rail-counter-item{
  position:absolute!important;
  z-index:auto!important;
  inset:0 auto auto 0;
  display:flex;
  align-items:center;
  gap:8px;
  height:100%;
  padding:0 12px 0 10px;
  white-space:nowrap;
  width:max-content;
  writing-mode:horizontal-tb!important;
  opacity:clamp(0,calc(1 - abs(var(--i,0) - var(--mhc-counter-roll,0))),1);
  transform:translateY(calc((var(--i,0) - var(--mhc-counter-roll,0)) * 100%))!important;
}
/* Neither part may shrink with the well, since the well's width is read
   from them while it may be folded to nothing; and neither may take the
   vertical writing a chapter gives every span in its identity, which is why
   the resets carry the flag. */
.mhc-rail-counter-no,.mhc-rail-counter-label{
  flex:0 0 auto;
  position:static!important;
  z-index:auto!important;
  writing-mode:horizontal-tb!important;
  transform:none!important;
  line-height:1!important;
}
.mhc-rail-counter-no{
  color:var(--mhc-rail-section-accent,var(--mhc-accent-ink));
  font:600 var(--mhc-type-2xs,10px)/1 var(--mono,"Geist Mono",ui-monospace,monospace);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
/* The identity's own rules set every span inside it in mono capitals at
   twelve pixels, at a weight only a flag can meet; the names are restated in
   the register's face. */
.mhc-rail-counter-label{
  max-width:220px;
  overflow:hidden;
  color:var(--mhc-ink);
  font:400 13px/1 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif)!important;
  letter-spacing:-.01em!important;
  text-transform:none;
  text-overflow:ellipsis;
  transition:opacity .28s ease;
}
/* The shell's own rule reaches the name as `.rail-index span`, which is one
   element more specific than the class above, so in every room built on the
   shell's markup the name came out at twelve pixels and tracked out as a
   label; restating it through the well gives every room the same name. */
:is(.rail-index,.rail-mark,.mhc-rail-identity) .mhc-rail-counter-label{font-size:13px!important;letter-spacing:-.01em!important}
.mhc-rail-counter-no{font-size:var(--mhc-type-2xs,10px)!important;letter-spacing:.04em!important;text-transform:uppercase}
/* The keyboard reaches the leaf through the identity itself, which is a
   button; a pointer reaches it by resting on the well. */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.mhc-rail-identity):focus-visible{outline:2px solid var(--mhc-ink);outline-offset:2px}

/* ---- the leaf: the register hung beneath the section well ---------------------- */
html.mhc-wayfinding-ready .mhc-section-register.rail-leaf,
html.mhc-wayfinding-ready .mhc-section-register.rail-leaf.is-withheld,
html.mhc-wayfinding-ready .mhc-section-register.rail-leaf.is-dense{
  position:absolute;
  z-index:5;
  left:50%;
  right:auto;
  top:calc(100% + 8px);
  bottom:auto;
  display:grid;
  gap:1px;
  align-content:start;
  justify-items:stretch;
  width:max-content;
  max-width:min(64ch,calc(100vw - 32px));
  max-height:min(70svh,560px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:10px 8px;
  border-radius:20px;
  background:var(--elastic-capsule-surface);
  box-shadow:var(--elastic-capsule-shadow);
  backdrop-filter:var(--elastic-capsule-blur);
  -webkit-backdrop-filter:var(--elastic-capsule-blur);
  contain:none;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-6px) scale(.98);
  transform-origin:50% 0;
  pointer-events:none;
  transition:opacity .2s ease,transform .5s var(--elastic-glide),visibility 0s linear .22s;
}
html.mhc-wayfinding-ready .mhc-section-register.rail-leaf::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}
html.mhc-wayfinding-ready body:not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open):not(.timeline-ambient-active) .mhc-section-register.rail-leaf.is-open:not(.is-withheld){
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
  pointer-events:auto;
  transition-delay:0s;
}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-register-sheet{display:none}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark{
  display:grid;
  grid-template-columns:26px 30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  width:auto;
  height:auto;
  min-height:30px;
  padding:0 14px 0 10px;
  border-radius:var(--elastic-pill);
  color:color-mix(in srgb,var(--mhc-ink) 74%,transparent);
  font:450 13px/1.25 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
  letter-spacing:-.012em;
  text-align:left;
  white-space:nowrap;
  opacity:0;
  translate:0 4px;
  transition:opacity .2s ease,translate .4s var(--elastic-ease),background .2s ease,color .2s ease;
}
html.mhc-wayfinding-ready body:not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) .rail-leaf.is-open:not(.is-withheld) .mhc-section-mark{
  opacity:1;
  translate:0 0;
  transition-delay:calc(60ms + var(--mhc-section-order,0) * 24ms),calc(60ms + var(--mhc-section-order,0) * 24ms),0s,0s;
}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark:is(:hover,:focus-visible){background:color-mix(in srgb,var(--mhc-ink) 8%,transparent);color:var(--mhc-ink);outline:none}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark:focus-visible{box-shadow:inset 0 0 0 2px var(--mhc-ink);outline:none}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark.is-current{color:var(--mhc-section-accent,var(--mhc-rail-section-accent,var(--mhc-accent-ink)));font-weight:500}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark[aria-pressed="true"]{color:var(--mhc-ink)}
/* The bead lies down in its row and fills from the left. */
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark::after{
  position:static;
  order:-1;
  left:auto;
  top:auto;
  width:calc(6px + var(--mhc-section-spot,0) * 20px);
  height:6px;
  background:linear-gradient(to right,var(--mhc-bead-strong) calc(var(--mhc-section-fill,0) * 100%),var(--mhc-bead-soft) 0);
  transform:none;
}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark:is(:hover,:focus-visible)::after{width:calc(6px + var(--mhc-section-spot,0) * 20px)}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark.is-method::after{width:8px;height:8px;background:none;box-shadow:inset 0 0 0 1.5px var(--mhc-accent-ink)}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark-index{
  position:static!important;
  writing-mode:horizontal-tb!important;
  transform:none!important;
  min-width:0;
  color:color-mix(in srgb,var(--mhc-ink) 72%,transparent);
  font:500 10px/1 var(--mono,"Geist Mono",ui-monospace,monospace);
  letter-spacing:.06em;
  text-align:left;
  opacity:1;
  transform:none;
}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark.is-current .mhc-section-mark-index{color:var(--mhc-section-accent,var(--mhc-rail-section-accent,var(--mhc-accent-ink)))}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark-label{
  position:static!important;
  writing-mode:horizontal-tb!important;
  transform:none!important;
  width:auto;
  max-width:none;
  clip-path:none;
  opacity:1;
  transform:none;
  pointer-events:auto;
  color:inherit;
  font:450 13px/1.25 var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif)!important;
  letter-spacing:-.012em!important;
  text-transform:none;
  text-align:left;
  white-space:nowrap;
  overflow-wrap:normal;
  transition:none;
}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark.is-current .mhc-section-mark-label{font-weight:500!important}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark-index{font-size:10px!important;letter-spacing:.06em!important;text-transform:uppercase}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark-span{margin-left:8px;position:static!important;writing-mode:horizontal-tb!important;transform:none!important;font-size:10px!important;letter-spacing:.035em!important;text-transform:none}

/* ---- the tail --------------------------------------------------------------- */
html.mhc-wayfinding-ready .rail-way{
  position:relative;
  z-index:auto;
  right:auto;
  bottom:auto;
  display:flex;
  align-items:center;
  flex:0 0 auto;
  width:auto;
  margin-left:2px;
}
html.mhc-wayfinding-ready .rail-way:not(:has(.mhc-xref-return.is-visible)){display:none}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return{
  min-height:var(--elastic-rail-top-well);
  height:var(--elastic-rail-top-well);
  width:auto;
  min-width:var(--elastic-rail-top-well);
  grid-template-columns:var(--elastic-rail-top-well) auto;
  gap:0;
  padding:0;
  border:0;
  overflow:hidden;
  background:var(--elastic-rail-well);
  color:var(--mhc-ink);
  box-shadow:var(--elastic-rail-well-shadow);
  opacity:1;
  pointer-events:auto;
  transform:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:background .22s ease,box-shadow .3s ease,color .2s ease,transform .38s var(--elastic-ease);
}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return:is(:hover,:focus-visible){background:var(--elastic-rail-lens);border:0;box-shadow:var(--elastic-rail-lens-shadow);color:var(--mhc-ink);transform:none}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return:focus-visible{outline:2px solid var(--mhc-ink);outline-offset:2px}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return:active{transform:scale(.94)}
/* The Timeline draws its arrow on a tinted disc of its own, which inside the
   well laid a second translucency over the first, so in the bar the arrow
   stands on the well alone, and it no longer steps aside on approach. */
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__icon{width:var(--elastic-rail-top-well);height:var(--elastic-rail-top-well);border:0;background:transparent;color:inherit;transform:none}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__icon svg{width:16px;height:16px;stroke-width:1.5}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__copy{
  display:block;
  width:var(--rail-way-w,auto);
  overflow:hidden;
  gap:0;
  font:450 13px/var(--elastic-rail-top-well) var(--sans,Helvetica,"Helvetica Neue",Arial,sans-serif);
  letter-spacing:-.012em;
  white-space:nowrap;
  transition:width .5s var(--elastic-glide);
}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__copy small{display:none}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__copy span{display:block;width:max-content;padding:0 12px 0 0;font:inherit;font-size:13px;overflow:visible}
html.mhc-wayfinding-ready .rail-way .mhc-xref-trail-toggle{
  position:relative;
  inset:auto;
  z-index:auto;
  min-height:22px;
  margin-left:2px;
  padding:0 8px;
  border:0;
  border-radius:var(--elastic-pill);
  background:var(--elastic-rail-well);
  box-shadow:var(--elastic-rail-well-shadow);
  color:color-mix(in srgb,var(--mhc-ink) 72%,transparent);
  font:500 var(--mhc-type-2xs,10px)/1 var(--mono,"Geist Mono",ui-monospace,monospace);
  letter-spacing:.08em;
}
html.mhc-wayfinding-ready .rail-way .mhc-xref-trail-toggle:is(:hover,:focus-visible),
html.mhc-wayfinding-ready .rail-way.is-ledger-open .mhc-xref-trail-toggle{border:0;background:var(--elastic-rail-lens);box-shadow:var(--elastic-rail-lens-shadow);color:var(--mhc-ink)}
html.mhc-wayfinding-ready .rail-way .mhc-xref-ledger{
  top:calc(100% + 12px);
  right:0;
  bottom:auto;
  width:min(330px,calc(100vw - 52px));
  transform-origin:top right;
  transform:translateY(-8px) scale(.985);
}
html.mhc-wayfinding-ready .rail-way:has(.mhc-xref-trail-toggle:is(:hover,:focus-visible)) .mhc-xref-ledger,
html.mhc-wayfinding-ready .rail-way.is-ledger-open .mhc-xref-ledger,
html.mhc-wayfinding-ready .rail-way .mhc-xref-ledger:is(:hover,:focus-within){transform:none}

/* The appearance control, as theme.js draws the page corner's: a dot that
   becomes the icon of the mode it would move to on approach. The corner's own
   dot stands down while the bar carries one. */
.rail-appearance{display:none}
html.mhc-wayfinding-ready .rail-appearance.theme-toggle{
  position:relative;
  z-index:auto;
  inset:auto;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:var(--elastic-rail-top-well);
  height:var(--elastic-rail-top-well);
  min-width:0;
  min-height:0;
  margin:0 0 0 2px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:var(--elastic-pill);
  background:transparent;
  color:var(--mhc-ink);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transform:none;
  cursor:pointer;
  transition:background .22s ease,box-shadow .3s ease,transform .38s var(--elastic-ease);
}
html.mhc-wayfinding-ready .rail-appearance.theme-toggle::before{content:none}
html.mhc-wayfinding-ready .rail-appearance.theme-toggle>.theme-toggle-icon{
  position:static;
  grid-area:1/1;
  display:block;
  width:18px!important;
  height:18px!important;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0!important;
  transform:scale(.35) rotate(-25deg)!important;
  filter:none!important;
  transition:opacity .18s ease,transform .32s var(--elastic-ease);
  pointer-events:none;
}
html.mhc-wayfinding-ready .rail-appearance.theme-toggle:is(:hover,:focus-visible){background:var(--elastic-rail-lens);box-shadow:var(--elastic-rail-lens-shadow);transform:none}
html.mhc-wayfinding-ready .rail-appearance.theme-toggle:active{transform:scale(.92)}
html.mhc-wayfinding-ready .rail-appearance.theme-toggle:is(:hover,:focus-visible)::before{opacity:0;transform:scale(.3)}
html.mhc-wayfinding-ready .rail-appearance.theme-toggle[aria-pressed="false"]>.theme-toggle-icon--dark,
html.mhc-wayfinding-ready .rail-appearance.theme-toggle[aria-pressed="true"]>.theme-toggle-icon--light{opacity:1!important;transform:scale(1) rotate(0)!important}
html.mhc-wayfinding-ready .rail-appearance.theme-toggle:focus-visible{outline:2px solid var(--mhc-ink);outline-offset:2px}
html.mhc-wayfinding-ready body>.archive-corner-toggle{display:none!important}

/* ---- the panels the capsule opens ------------------------------------------------ */
/* Open windows retain the control bar's size, position and available actions.
   A pressed control uses the same tinted affordance as an archive index row. */
html.mhc-wayfinding-ready body:is(.drawer-open,.mhc-nav-open) :is(#menu-toggle,#mhc-menu-toggle),
html.mhc-wayfinding-ready body:is(.chapter-search-open,.search-open) :is(.chapter-search,#search-toggle,#mhc-search-toggle){
  background:var(--way-hover-surface)!important;color:var(--mhc-ink)!important;
  box-shadow:inset 0 0 0 1px var(--way-hover-border)!important;
}
/* The pin's notice stands beneath the handle. */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>.mhc-rail-pin-notice{
  left:auto;
  right:4px;
  top:calc(100% + 10px);
  transform:translate(0,-4px);
}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)[data-pin-feedback]>.mhc-rail-pin-notice{transform:translate(0,0)}

/* ---- the Timeline's scrubber, lying along the top ------------------------------------ */
html.mhc-wayfinding-ready .rail-scrub-cursor{
  left:var(--rail-scrub-y);
  top:50%;
  width:3px;
  height:20px;
  transform:translate(-50%,-50%) scaleY(.62);
}
html.mhc-wayfinding-ready .rail-mark.is-timeline.is-scrubbing .rail-scrub-cursor{transform:translate(-50%,-50%) scaleY(1)}
html.mhc-wayfinding-ready .rail-scrub-preview{
  left:var(--rail-scrub-y);
  right:auto;
  top:calc(100% + 9px);
  bottom:auto;
  transform:translate(-50%,-6px);
}
html.mhc-wayfinding-ready .rail-mark.is-timeline.is-scrubbing .rail-scrub-preview{transform:translate(-50%,0)}
html.mhc-wayfinding-ready .rail-mark.is-timeline{cursor:ew-resize}
/* While a year is being chosen the tick is the reading, and the era's name
   steps back beneath it. */
html.mhc-wayfinding-ready .rail-mark.is-timeline.is-scrubbing .mhc-rail-counter-label{opacity:.3}

/* ---- the masthead becomes the reading's soft edge ---------------------------------- */
/* The header's line is in the capsule, so the header shows nothing of its
   own and keeps only the opaque copy of the field the chapter hands it,
   masked to a soft lower edge, so the reading dissolves into the room's own
   field as it rises beneath the capsule rather than being cut. A room without
   a field takes its plain ground the same way. */
html.mhc-wayfinding-ready .archive-masthead:not(.landing-masthead){
  --archive-masthead-lead:0px;
  --archive-masthead-trail:0px;
  --mhc-masthead-edge-mask:linear-gradient(to bottom,#000 0,#000 14px,transparent 100%);
  z-index:989;
  height:var(--elastic-rail-top-band);
  min-height:0;
  padding:0;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none;
}
html.mhc-wayfinding-ready .archive-masthead:not(.landing-masthead)>:is(.archive-masthead-mark,.archive-masthead-note){
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
html.mhc-wayfinding-ready .archive-masthead:not(.landing-masthead)>:is(.mhc-chapter-field,.mhc-chapter-field-grain){
  opacity:1!important;
  -webkit-mask-image:var(--mhc-masthead-edge-mask);
  mask-image:var(--mhc-masthead-edge-mask);
}
html.mhc-wayfinding-ready .archive-masthead:not(.landing-masthead)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:var(--mhc-ground);
  -webkit-mask-image:var(--mhc-masthead-edge-mask);
  mask-image:var(--mhc-masthead-edge-mask);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
html.mhc-wayfinding-ready:is([data-scrollbar-chapter="timeline"],[data-scrollbar-chapter="sources"]) body.has-chapter-masthead:not(.is-chapter-hero-active) .archive-masthead:not(.landing-masthead)::before,
html.mhc-wayfinding-ready body[data-chapter="about"] .archive-masthead:not(.landing-masthead)::before{opacity:1}
html.mhc-wayfinding-ready body:is(.drawer-open,.mhc-nav-open,.chapter-search-open,.search-open) .archive-masthead:not(.landing-masthead){opacity:0}

@media (prefers-reduced-motion:reduce){
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail),
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>*,
  .rail-room-name,.rail-room-ring,.rail-room-meter,.mhc-rail-counter-item,.mhc-rail-counter-label,
  html.mhc-wayfinding-ready .mhc-section-register.rail-leaf,
  html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark,
  html.mhc-wayfinding-ready .rail-way .mhc-xref-return__copy,
  .mhc-rail-grip-glyph{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* The handle belongs to the rail's chrome rather than to its navigation, so it
   leaves with the chrome whenever a panel takes the rail over. */
body:is(.drawer-open,.mhc-nav-open,.chapter-search-open,.search-open) .mhc-rail-grip{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ---------------------------------------------------------------------------
   The rail's grid, once the handle is in it
   ------------------------------------------------------------------------ */

html.mhc-rail-dock-ready :is(.archive-rail,.mhc-archive-rail){
  grid-template-rows:var(--elastic-rail-grip) var(--elastic-rail-control-size) var(--elastic-rail-control-size) minmax(0,1fr) var(--elastic-rail-control-size);
  grid-template-columns:minmax(0,1fr);
}
html.mhc-rail-dock-ready .mhc-rail-grip{grid-row:1;grid-column:1}
html.mhc-rail-dock-ready :is(#menu-toggle,#mhc-menu-toggle){grid-row:2;grid-column:1}
/* Every chapter but the Timeline gives its search capsule the `chapter-search`
   class; the Timeline names it by id alone. A control left out of this list is
   not merely misplaced: it takes an implicit track of its own, and that track
   comes out of the width or the height every other capsule was sharing, which
   is how one unplaced button squashes the whole bar. test/rail_dock.js walks
   the shipped rails and fails if any of their controls is not named here. */
html.mhc-rail-dock-ready :is(.chapter-search,#search-toggle,#mhc-search-toggle){grid-row:3;grid-column:1}
html.mhc-rail-dock-ready :is(.archive-rail>.rail-index,.archive-rail>.rail-mark,.mhc-archive-rail>.mhc-rail-identity){grid-row:4;grid-column:1}
html.mhc-rail-dock-ready :is(.archive-rail>.rail-top,.mhc-archive-rail>.mhc-rail-top){grid-row:5;grid-column:1}

/* ---------------------------------------------------------------------------
   Dock: right
   ---------------------------------------------------------------------------
   The reservation crosses the page. Since --elastic-content-left is the only
   term in every negative margin the chapters use to escape it, setting it to
   zero retires those escapes rather than inverting them, and the two rules
   that reach for a literal 100vw are the only ones that have to be told the
   canvas is now narrower than the viewport.
   ------------------------------------------------------------------------ */

:root[data-rail-dock="right"]{
  --elastic-content-left:0px;
  --elastic-content-half:0px;
  --elastic-content-right:var(--elastic-rail-claim);
  --elastic-page-safe-left:var(--elastic-rail-free-inset);
  --elastic-page-safe-half:calc(var(--elastic-rail-free-inset) / 2);
  --elastic-copy-safe-left:var(--elastic-rail-free-inset);
  --elastic-drawer-origin-x:calc(100vw - var(--elastic-rail-left) - var(--elastic-rail-pad) - (var(--elastic-rail-control-size) / 2));
  --elastic-search-origin-x:var(--elastic-drawer-origin-x);
}

:root[data-rail-dock="right"] body.mhc-archive-enabled{
  padding-left:0;
  padding-right:var(--elastic-content-right);
}
:root[data-rail-dock="right"] body:not(.mhc-archive-enabled)>.site-shell{margin-left:0;margin-right:var(--elastic-content-right)}
/* The mirror has to carry the exemption as well as the reservation, so that
   the routed container reserves once, not twice. elastic-archive-shell.css
   zeroes the body's own padding for the two routes whose section takes the
   inset instead, at its line 473; without the same exemption here the right
   dock charged the rail's width twice, once on the body and once on the
   section, and Summary's findings stack and Frames' register both settled
   half a rail left of the page they are centerd on. */
:root[data-rail-dock="right"] body.mhc-archive-enabled.chapter-reading:is([data-chapter='frames'],[data-chapter='summary']){
  padding-right:0;
}
:root[data-rail-dock="right"] body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames,
:root[data-rail-dock="right"] body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary{
  padding-left:0;
  padding-right:var(--elastic-content-right);
}
/* Both hero rules state 100vw because the canvas used to be inset on the left
   and bled back. With the inset on the right there is nothing to bleed back
   across, so a viewport-wide box would only push a horizontal scrollbar. */
:root[data-rail-dock="right"] body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero,
:root[data-rail-dock="right"] body.mhc-archive-enabled.chapter-reading>.site-shell>.chapter-hero{
  width:auto;
  margin-left:0;
  padding-left:max(var(--elastic-copy-safe-left),var(--gutter,0px));
}

:root[data-rail-dock="right"] :is(.archive-rail,.mhc-archive-rail){
  left:auto;
  right:var(--elastic-rail-left);
}

/* The hero handle. Everything that pointed left now points right: the rail
   retreats off the right edge, the sliver it leaves sits at its left, and the
   clear approach target sits to the left of the sliver. */
@media (hover:hover) and (pointer:fine){
  :root[data-rail-dock="right"] body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail){
    transform:translate(calc(100% - var(--elastic-rail-minimized-width) - var(--elastic-rail-inset)),-50%);
  }
  :root[data-rail-dock="right"] body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail)::before{
    inset:50% auto auto 0;
  }
  :root[data-rail-dock="right"] body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail)::after{
    right:auto;
    left:calc(var(--elastic-rail-minimized-width) - 44px);
  }
  :root[data-rail-dock="right"] body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail):is(:hover,:focus-within){
    transform:translate(0,-50%);
  }
}

/* The register is anchored to `--elastic-content-right`, which this dock has
   already set to the width the rail claims, so the column simply comes to rest
   against the rail's inner edge and its names keep opening towards the page. */
:root[data-rail-dock="right"] :is(.archive-rail,.mhc-archive-rail)>.mhc-rail-pin-notice{
  left:auto;
  right:calc(var(--elastic-rail-inset) + var(--elastic-rail-control-size) + 12px);
  transform:translate(4px,-50%);
}
:root[data-rail-dock="right"] :is(.archive-rail,.mhc-archive-rail)[data-pin-feedback]>.mhc-rail-pin-notice{transform:translate(0,-50%)}

/* Timeline's year preview opens away from the rail, which on this dock means
   it opens leftward; left where it was authored it would be struck against the
   outside of the viewport and never seen. */
:root[data-rail-dock="right"] .rail-scrub-preview{
  left:auto;
  right:calc(100% + 9px);
  transform:translate(6px,-50%);
}
:root[data-rail-dock="right"] .rail-mark.is-timeline.is-scrubbing .rail-scrub-preview{transform:translate(0,-50%)}

/* The drawer and the search panel are irises struck from the capsule that
   opens them, so both the plate and the center of the circle cross with the
   rail. The pill menu paints the whole viewport and needs neither. */
:root[data-rail-dock="right"] :is(.chapter-drawer,.mhc-chapter-drawer):not(.chapter-pill-menu){
  left:auto;
  right:var(--elastic-drawer-left);
  transform:translateX(18px) scale(.98);
}
:root[data-rail-dock="right"] body:is(.drawer-open,.mhc-nav-open) :is(.chapter-drawer,.mhc-chapter-drawer):not(.chapter-pill-menu){transform:translateX(0) scale(1)}
:root[data-rail-dock="right"] :is(.drawer-inner,.mhc-drawer-inner){padding:22px calc(var(--elastic-rail-claim) + 20px) 16px 22px}
:root[data-rail-dock="right"] .chapter-search-panel{left:auto;right:var(--elastic-drawer-left,0)}
:root[data-rail-dock="right"] .chapter-search-panel .search-shell{padding:28px 96px 48px 28px}

:root[data-rail-dock="right"] .mhc-archive-enabled .prog{
  left:var(--elastic-page-safe-left);
  width:calc(100% - var(--elastic-page-safe-left) - var(--elastic-content-right) - var(--elastic-rail-free-inset));
}
:root[data-rail-dock="right"] .mhc-xref-cluster{right:calc(var(--elastic-content-right) + 18px)}
:root[data-rail-dock="right"] .skip-link{left:var(--elastic-rail-free-inset)}

/* Timeline hangs its filter launcher in the corner opposite its records, and
   that corner was chosen while the rail always stood on the left. With the rail
   against the right edge the launcher would be standing under the spine, so it
   crosses to the other corner and its window opens from the corner it is now
   in: the iris is struck from the trigger, therefore moving one without the
   other would open the window out of a corner that no longer holds anything.
   The open state is restated because this file is read after the chronology's
   own, where the two rules would otherwise carry equal weight. */
:root[data-rail-dock="right"] .timeline-apparatus{
  right:auto;
  left:max(18px,env(safe-area-inset-left));
  transform-origin:left bottom;
}
:root[data-rail-dock="right"] .timeline-controlbar,
:root[data-rail-dock="right"] .timeline-filter-cluster{justify-items:start}
:root[data-rail-dock="right"] .timeline-filter-drawer{
  right:auto;
  left:0;
  transform-origin:0% 100%;
  clip-path:inset(92% 78% 0 0 round 32px);
}
:root[data-rail-dock="right"] .timeline-apparatus.filter-drawer-open .timeline-filter-drawer{
  clip-path:inset(-180px round 32px);
}
/* The return capsule keeps the right corner, and with the launcher gone from it
   the clearance the chronology reserved there is no longer owed. */
:root[data-rail-dock="right"] .journey-ready .mhc-xref-cluster--timeline{
  right:calc(var(--elastic-content-right) + 18px);
  width:min(430px,calc(100vw - var(--elastic-content-right) - 54px));
}

/* ---------------------------------------------------------------------------
   Dock: bottom
   ---------------------------------------------------------------------------
   The column becomes a row. Because the rail is a grid, the turn is a change
   of template rather than a rebuild, and because every capsule is round at
   every size, none of them has to be restyled to sit beside its neighbour
   rather than above it.
   ------------------------------------------------------------------------ */

:root[data-rail-dock="bottom"]{
  --elastic-content-left:0px;
  --elastic-content-half:0px;
  --elastic-content-bottom:var(--elastic-rail-bar-claim);
  --elastic-page-safe-left:var(--elastic-rail-free-inset);
  --elastic-page-safe-half:calc(var(--elastic-rail-free-inset) / 2);
  --elastic-copy-safe-left:var(--elastic-rail-free-inset);
  --mhc-rail-bottom-clearance:var(--elastic-rail-bar-claim);
  --elastic-drawer-origin-x:calc(50vw - (var(--elastic-rail-bar-length) / 2) + var(--elastic-rail-pad-lead) + var(--elastic-rail-head) + (var(--elastic-rail-control-size) / 2));
  --elastic-drawer-origin-y:calc(100svh - var(--elastic-rail-left) - (var(--elastic-rail-bar-height) / 2));
  --elastic-search-origin-x:calc(var(--elastic-drawer-origin-x) + var(--elastic-rail-control-size) + var(--elastic-rail-gap));
  --elastic-search-origin-y:var(--elastic-drawer-origin-y);
}

:root[data-rail-dock="bottom"] body.mhc-archive-enabled{
  padding-left:0;
  padding-bottom:var(--elastic-content-bottom);
}
:root[data-rail-dock="bottom"] body:not(.mhc-archive-enabled)>.site-shell{margin-left:0;padding-bottom:var(--elastic-content-bottom)}
:root[data-rail-dock="bottom"] body.mhc-archive-enabled.chapter-reading[data-chapter='frames'] #sec-frames,
:root[data-rail-dock="bottom"] body.mhc-archive-enabled.chapter-reading[data-chapter='summary'] #sec-summary{padding-left:0}
:root[data-rail-dock="bottom"] body:not(.mhc-archive-enabled)>.site-shell>.chapter-hero,
:root[data-rail-dock="bottom"] body.mhc-archive-enabled.chapter-reading>.site-shell>.chapter-hero{
  width:100%;
  margin-left:0;
  padding-left:max(var(--elastic-copy-safe-left),var(--gutter,0px));
}

:root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail){
  left:50%;
  right:auto;
  top:auto;
  bottom:var(--elastic-rail-left);
  width:var(--elastic-rail-bar-length);
  height:var(--elastic-rail-bar-height);
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:var(--elastic-rail-grip) var(--elastic-rail-control-size) var(--elastic-rail-control-size) minmax(0,1fr) var(--elastic-rail-control-size);
  padding:var(--elastic-rail-pad) var(--elastic-rail-pad-lead);
  transform:translateX(-50%);
}
:root[data-rail-dock="bottom"] .mhc-rail-grip{grid-row:1;grid-column:1}
:root[data-rail-dock="bottom"] :is(#menu-toggle,#mhc-menu-toggle){grid-row:1;grid-column:2}
:root[data-rail-dock="bottom"] :is(.chapter-search,#search-toggle,#mhc-search-toggle){grid-row:1;grid-column:3}
:root[data-rail-dock="bottom"] :is(.archive-rail>.rail-index,.archive-rail>.rail-mark,.mhc-archive-rail>.mhc-rail-identity){grid-row:1;grid-column:4}
:root[data-rail-dock="bottom"] :is(.archive-rail>.rail-top,.mhc-archive-rail>.mhc-rail-top){grid-row:1;grid-column:5}

/* The identity's label was set to read up the side of the page. Lying down it
   is ordinary type again, and the reserve kept for the pin glyph moves from
   the head of the capsule to its leading edge. */
:root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity)>.mhc-rail-section-rest{
  inset:9px 14px;
  writing-mode:horizontal-tb;
  transform:none;
  /* Centerd, as it is in the column. The pin's reserve is taken off the
     leading edge here rather than off the head, so the label sits in the
     middle of what is left of the capsule exactly as it does when the rail is
     standing up; left-aligning it instead strands the remaining width of a
     pill that is as wide as whatever the bar has to spare. */
  justify-content:center;
}
:root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)>[data-rail-pinned]>.mhc-rail-section-rest{top:9px;left:40px}
/* The identity's authored labels are set to read up the side of the page, and
   they are the ones on screen whenever the section navigator has not built:
   over `file://`, with script refused, or on a load that lost one of its
   requests. A bar carrying a column of stacked letters is the worst of both
   orientations, so the labels lie down here as well. Their own transforms go
   with the rotation they were part of, which costs the archive/chapter swap a
   six pixel slide and leaves the opacity that actually performs it. */
:root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail) :is(.rail-index-label,.mhc-rail-label,.rail-mark-archive,.rail-mark-chapter,.rail-mark-timeline,.rail-mark-year,.rail-mark-era-name){
  writing-mode:horizontal-tb!important;
  transform:none!important;
  white-space:nowrap;
}
:root[data-rail-dock="bottom"] .mhc-rail-pin-indicator{top:50%;left:14px;transform:translateY(-50%)}

/* The register runs down the right edge and is centerd on the viewport, which
   on a narrow screen puts its lower marks inside the strip the bar now spans
   almost the whole width of. Centring it on the reading area instead of on the
   viewport keeps the two instruments apart at every size. */
:root[data-rail-dock="bottom"] .mhc-section-register{
  top:calc(50% - (var(--mhc-rail-bottom-clearance) / 2));
  max-height:calc(100svh - 24px - var(--mhc-rail-bottom-clearance));
}
/* Reading progress fills the capsule along the axis the capsule is lying on.
   The shared clip takes the remaining fraction off the BOTTOM, which grows the
   fill downwards and is right for a column; along the foot of the page the
   same fraction comes off the trailing edge instead, so the fill grows from
   left to right and reads as a progress bar rather than as a rising level. */
:root[data-rail-dock="bottom"] .rail-progress,
:root[data-rail-dock="bottom"] .mhc-rail-progress,
:root[data-rail-dock="bottom"] .rail-mark-progress{
  inset:5px!important;
  clip-path:inset(0 var(--rail-fill-remaining,100%) 0 0 round 999px)!important;
}
/* The Timeline's fill also deepens as it grows, and its gradient was written
   for a column: the pale end where the fill starts, the saturated end where it
   finishes. Lying down, that run is from the leading edge to the trailing one. */
:root[data-rail-dock="bottom"] .rail-mark-progress{
  background:linear-gradient(to right,
    color-mix(in srgb,var(--rail-era-color) 14%,transparent),
    color-mix(in srgb,var(--rail-era-color) 34%,transparent))!important;
}

/* The Timeline's scrubber. Its tick lay across the column and travelled down
   it; along the foot it stands up and travels across. The year preview leaves
   the capsule on the side that faces the reading, which is upward here. */
:root[data-rail-dock="bottom"] .rail-scrub-cursor{
  left:var(--rail-scrub-y);
  top:50%;
  width:3px;
  height:24px;
  transform:translate(-50%,-50%) scaleY(.62);
}
:root[data-rail-dock="bottom"] .rail-mark.is-timeline.is-scrubbing .rail-scrub-cursor{transform:translate(-50%,-50%) scaleY(1)}
:root[data-rail-dock="bottom"] .rail-scrub-preview{
  left:var(--rail-scrub-y);
  right:auto;
  top:auto;
  bottom:calc(100% + 9px);
  transform:translate(-50%,6px);
}
:root[data-rail-dock="bottom"] .rail-mark.is-timeline.is-scrubbing .rail-scrub-preview{transform:translate(-50%,0)}

/* On this dock the rail leaves the right margin altogether, so the register
   keeps the column it already had and needs nothing said about it here. */
:root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)>.mhc-rail-pin-notice{
  left:calc(var(--elastic-rail-pad-lead) + var(--elastic-rail-head) + (2 * var(--elastic-rail-control-size)) + (2 * var(--elastic-rail-gap)));
  top:auto;
  bottom:calc(100% + var(--elastic-rail-gap));
  transform:translate(0,4px);
}
:root[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail)[data-pin-feedback]>.mhc-rail-pin-notice{transform:translate(0,0)}

/* The hero handle lies down with the rail: the bar retreats below the foot of
   the viewport and leaves a horizontal sliver on its upper edge. */
@media (hover:hover) and (pointer:fine){
  :root[data-rail-dock="bottom"] body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail){
    transform:translate(-50%,calc(100% - var(--elastic-rail-minimized-width) - var(--elastic-rail-inset)));
  }
  :root[data-rail-dock="bottom"] body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail)::before{
    inset:0 auto auto 50%;
    width:var(--elastic-rail-minimized-height);
    height:var(--elastic-rail-minimized-width);
    transform:translateX(-50%);
  }
  :root[data-rail-dock="bottom"] body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail)::after{
    right:auto;
    left:50%;
    top:calc(var(--elastic-rail-minimized-width) - 44px);
    width:calc(var(--elastic-rail-minimized-height) + 24px);
    height:44px;
    transform:translateX(-50%);
  }
  :root[data-rail-dock="bottom"] body:is(.mhc-rail-minimized,.is-chapter-hero-active:not(.mhc-rail-pinned)):not(.drawer-open):not(.mhc-nav-open):not(.chapter-search-open):not(.search-open) :is(.archive-rail,.mhc-archive-rail):is(:hover,:focus-within){
    transform:translate(-50%,0);
  }
}

:root[data-rail-dock="bottom"] :is(.chapter-drawer,.mhc-chapter-drawer):not(.chapter-pill-menu){
  left:50%;
  top:auto;
  bottom:calc(var(--elastic-rail-bar-claim) + var(--elastic-rail-gap));
  transform:translate(-50%,18px) scale(.98);
}
:root[data-rail-dock="bottom"] body:is(.drawer-open,.mhc-nav-open) :is(.chapter-drawer,.mhc-chapter-drawer):not(.chapter-pill-menu){transform:translate(-50%,0) scale(1)}
:root[data-rail-dock="bottom"] :is(.drawer-inner,.mhc-drawer-inner){padding:22px 22px 16px}
:root[data-rail-dock="bottom"] .chapter-search-panel{
  left:50%;
  top:auto;
  bottom:calc(var(--elastic-rail-bar-claim) + var(--elastic-rail-gap));
  transform:translateX(-50%);
}
:root[data-rail-dock="bottom"] .chapter-search-panel .search-shell{padding:28px 28px 40px}

/* Everything the chapters hang from the foot of the viewport is lifted by the
   bar's own claim, so the reader never has to move the rail to reach a control
   the rail is standing on. */
:root[data-rail-dock="bottom"] .mhc-xref-cluster{bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--mhc-rail-bottom-clearance))}
/* A minimum-height cover can extend past a short window. Anchor its cue to
   the visible viewport as well as the cover, with one rail clearance only.
   Timeline's cue belongs to its flowing footer, which moves as one object. */
:root[data-rail-dock="bottom"] [data-hero-continue]:not(.about-cue):not(.scroll-cue--intro){
  top:auto!important;
  bottom:calc(max(24px,100% - 100svh + 24px) + var(--mhc-rail-bottom-clearance))!important;
  margin-bottom:0!important;
}
:root[data-rail-dock="bottom"] .hero-footer{bottom:var(--mhc-rail-bottom-clearance)}
@media(max-width:700px){
  :root[data-rail-dock="bottom"] .sources-cover [data-hero-continue]{bottom:14px!important}
}
:root[data-rail-dock="bottom"] .journey-ready :is(.timeline-apparatus,.timeline-apparatus.has-return-control){--filter-bottom:calc(var(--mhc-rail-bottom-clearance) + 18px)}
:root[data-rail-dock="bottom"] .journey-ready .mhc-xref-cluster--timeline{right:max(18px,calc(env(safe-area-inset-right) + 18px));width:min(430px,calc(100vw - 36px))}
:root[data-rail-dock="bottom"] .skip-link{left:var(--elastic-rail-free-inset)}

/* Pinned surfaces are the one case the foot margin cannot reach. Ordinary
   prose passes under the bar while the reader scrolls and can always be
   scrolled out from under it again, because the body reserves the bar's height
   at the end of the document; a panel held at a sticky offset and sized to the
   viewport, by contrast, comes to rest under the bar and stays there. Each of
   those panels therefore gives the bar its height back. The list is short, and
   it is short because it was collected by measuring where every sticky and
   fixed box in the archive actually comes to rest rather than by guessing. */
:root[data-rail-dock="bottom"] .story-ready .story-card{
  height:calc(100svh - (2 * var(--story-inset)) - var(--mhc-rail-bottom-clearance));
}
/* The constellation stage is pinned at the top of the viewport and hangs its
   legends, its lens bar and its inspector from its own lower edge, so raising
   that edge carries all of them clear at once. */
:root[data-rail-dock="bottom"] .stage{
  height:calc(100svh - var(--mhc-rail-bottom-clearance));
}
/* Only a standalone viewport control needs this clearance. Applying it to
   the title card's relative button lifts that button out of its clipped row. */
:root[data-rail-dock="bottom"] body>.theme-toggle:not(.archive-corner-toggle){top:auto;bottom:calc(var(--mhc-rail-bottom-clearance) + 12px);transform:none}

/* ---------------------------------------------------------------------------
   Moving the rail
   ---------------------------------------------------------------------------
   Three states, each with one job. Picking the rail up lifts it off the page
   and hands its transform to the controller. Carrying it paints the footprint
   of the dock a release would choose. Setting it down returns the transform to
   the stylesheet and lets the settle animation, which the controller owns
   because it has to measure two layouts to describe it, play over the top.
   ------------------------------------------------------------------------ */

html.mhc-rail-dock-ready :is(.archive-rail,.mhc-archive-rail){
  --mhc-rail-anchor:translateY(-50%);
}
html.mhc-rail-dock-ready:is([data-rail-dock="bottom"],[data-rail-dock="top"]) :is(.archive-rail,.mhc-archive-rail){
  --mhc-rail-anchor:translateX(-50%);
}

html.mhc-rail-dragging{cursor:grabbing}
html.mhc-rail-dragging body{user-select:none;-webkit-user-select:none}
html.mhc-rail-dragging :is(.archive-rail,.mhc-archive-rail),
html.mhc-rail-settling :is(.archive-rail,.mhc-archive-rail){
  z-index:1300;
  pointer-events:auto!important;
}
/* While the rail is in hand it is never the hero's resting sliver, whatever
   the hero state says, because the reader is holding the whole object. */
html.mhc-rail-dragging :is(.archive-rail,.mhc-archive-rail){
  transform:translate(var(--mhc-rail-drag-x,0px),var(--mhc-rail-drag-y,0px)) var(--mhc-rail-anchor) scale(var(--mhc-rail-lift,1))!important;
  transition:none!important;
  will-change:transform;
}
html.mhc-rail-settling :is(.archive-rail,.mhc-archive-rail){
  transform:var(--mhc-rail-anchor)!important;
  transition:none!important;
  will-change:transform;
}
html:is(.mhc-rail-dragging,.mhc-rail-settling) :is(.archive-rail,.mhc-archive-rail)>*{
  opacity:1!important;
  pointer-events:auto!important;
}
html:is(.mhc-rail-dragging,.mhc-rail-settling) :is(.archive-rail,.mhc-archive-rail)::before,
html:is(.mhc-rail-dragging,.mhc-rail-settling) :is(.archive-rail,.mhc-archive-rail)::after{opacity:0!important}
/* Commit the reading gutter once. Only the fixed rail animates between docks;
   interpolating page padding would lay out the entire chapter every frame. */

html.mhc-rail-dragging .mhc-rail-grip{cursor:grabbing}
html.mhc-rail-dragging .mhc-rail-grip::before{opacity:1;transform:scale(1.2)}
:root[data-rail-dock="bottom"].mhc-rail-dragging .mhc-rail-grip::before{transform:rotate(90deg) scale(1.2)}

/* Lifting thickens the glass rather than tinting it, which is the same answer
   the capsules already give to a pointer resting on them. */
html:is(.mhc-rail-dragging,.mhc-rail-settling) :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.rail-index,.rail-mark,.mhc-rail-action,.mhc-rail-identity){
  box-shadow:
    0 34px 70px rgba(var(--mhc-shadow-rgb),.26),
    0 8px 18px rgba(var(--mhc-shadow-rgb),.13),
    inset 0 0 0 1px rgba(var(--elastic-glass-spec-rgb),calc(.5 * var(--elastic-glass-spec))),
    inset 0 0 0 2.5px rgba(var(--mhc-shadow-rgb),.07),
    inset 0 2.5px 1.5px -1px rgba(var(--elastic-glass-spec-rgb),calc(.56 * var(--elastic-glass-spec))),
    inset 0 -2.5px 1.5px -1px rgba(var(--elastic-glass-spec-rgb),calc(.24 * var(--elastic-glass-spec)));
}
/* A capsule under the pointer must not also answer as though it were about to
   be pressed while the whole rail is being carried. */
html:is(.mhc-rail-dragging,.mhc-rail-settling) :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.mhc-rail-action):hover{transform:none}

/* The footprint. It travels between the three zones with the pointer rather
   than appearing and disappearing at each threshold, so the reader sees one
   object choosing a place rather than three lamps taking turns. */
.mhc-rail-landing{
  position:fixed;
  z-index:1290;
  margin:0;
  padding:0;
  border:1px dashed color-mix(in srgb,var(--mhc-ink) 30%,transparent);
  border-radius:var(--elastic-pill);
  background:color-mix(in srgb,var(--mhc-rail-section-accent,var(--mhc-chapter-color,var(--mhc-accent))) 13%,rgba(var(--mhc-float-rgb),.3));
  box-shadow:inset 0 0 0 1px rgba(var(--elastic-glass-spec-rgb),calc(.3 * var(--elastic-glass-spec)));
  opacity:0;
  transform:scale(.9);
  pointer-events:none;
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  transition:
    opacity .18s ease,
    transform .44s var(--elastic-ease),
    left .44s var(--elastic-ease),
    top .44s var(--elastic-ease),
    width .44s var(--elastic-ease),
    height .44s var(--elastic-ease);
}
html.mhc-rail-dragging .mhc-rail-landing{opacity:1;transform:scale(1)}
html.mhc-rail-settling .mhc-rail-landing{opacity:0;transform:scale(1.04);transition:opacity .26s ease,transform .34s var(--elastic-ease)}

/* The keyboard route reports where the rail went, since a reader who moved it
   with an arrow key may not have been looking at the edge it left. */
.mhc-rail-dock-status{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  pointer-events:none!important;
}

@media(max-width:1040px){
  :root{--elastic-rail-bar-length:min(560px,calc(100vw - (2 * var(--elastic-rail-left)) - 16px))}
}
@media(max-width:760px){
  :root{--elastic-rail-bar-length:calc(100vw - (2 * var(--elastic-rail-left)) - 10px);--elastic-rail-free-inset:clamp(14px,4vw,24px)}
  :root[data-rail-dock="right"] :is(.drawer-inner,.mhc-drawer-inner){padding:18px 70px 18px 16px}
  :root[data-rail-dock="bottom"] :is(.drawer-inner,.mhc-drawer-inner){padding:18px 16px}
}

/* A reader who has asked for less motion still gets the dock; what they do not
   get is the travel. The settle collapses to a cut, the footprint stops
   sliding between zones, and the lift stops scaling the rail under the hand. */
@media(prefers-reduced-motion:reduce){
  .mhc-rail-landing{transition:opacity .12s ease}
  html.mhc-rail-dragging :is(.archive-rail,.mhc-archive-rail){
    transform:translate(var(--mhc-rail-drag-x,0px),var(--mhc-rail-drag-y,0px)) var(--mhc-rail-anchor)!important;
  }
  .mhc-rail-grip::before{transition:opacity .12s ease}
}

@media print{
  .mhc-rail-landing,.mhc-rail-grip{display:none!important}
}

/* Unified wayfinding · every dock uses the same wells and material.
   The home link is deliberately outside the movable instrument. */
html.mhc-wayfinding-ready{
  --elastic-rail-top-height:44px;
  --elastic-rail-top-well:36px;
  --elastic-rail-width:44px;
  --elastic-rail-bar-height:44px;
  --elastic-rail-left:12px;
  --elastic-rail-top-inset:12px;
  --archive-masthead-band:68px;
  --elastic-rail-top-band:68px;
  /* Two wells that are each read, the room and the section, stand apart by
     more than the 4px of glass around them, so that they read as two parts of
     the sentence rather than as one well creased in the middle. */
  --elastic-rail-well-gap:6px;
}
html.mhc-wayfinding-ready body>.rail-home-card>.rail-home{
  position:relative;
  display:flex;align-items:center;height:44px;padding:0 16px;margin:0;
  background:transparent;box-shadow:none;
  font-size:15px;line-height:1;letter-spacing:-.04em;pointer-events:auto;
}
html.mhc-wayfinding-ready body>.rail-home-card>.rail-home i{display:inline;font-size:inherit;letter-spacing:-.04em}
html.mhc-wayfinding-ready .archive-masthead:not(.landing-masthead){pointer-events:none!important}
html.mhc-wayfinding-ready .archive-masthead:not(.landing-masthead)>:is(.archive-masthead-mark,.archive-masthead-note){visibility:hidden!important;pointer-events:none!important}
html.mhc-wayfinding-ready body>.archive-corner-toggle{display:none!important}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail){
  position:fixed!important;z-index:1100;display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;
  width:max-content!important;height:var(--elastic-rail-top-height)!important;min-height:0!important;
  max-width:calc(100vw - 24px);padding:4px!important;gap:2px!important;margin:0;
  border:0!important;border-radius:999px!important;overflow:visible!important;
  background:var(--elastic-capsule-surface)!important;box-shadow:var(--elastic-capsule-shadow)!important;
  backdrop-filter:var(--elastic-capsule-blur);-webkit-backdrop-filter:var(--elastic-capsule-blur);
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  transition:box-shadow .24s ease,opacity .18s ease;
}
html.mhc-wayfinding-ready[data-rail-dock="top"] :is(.archive-rail,.mhc-archive-rail){
  left:auto!important;right:max(12px,env(safe-area-inset-right))!important;top:max(12px,env(safe-area-inset-top))!important;bottom:auto!important;
  transform:none;--mhc-rail-anchor:translate(0,0);
}
html.mhc-wayfinding-ready[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail){
  left:50%!important;right:auto!important;top:auto!important;bottom:max(12px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%);--mhc-rail-anchor:translateX(-50%);
}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail){
  flex-direction:column;width:max-content!important;min-width:44px;height:max-content!important;border-radius:22px!important;max-height:calc(100svh - 100px);
  top:50%!important;bottom:auto!important;transform:translateY(-50%);--mhc-rail-anchor:translateY(-50%);
}
html.mhc-wayfinding-ready[data-rail-dock="left"] :is(.archive-rail,.mhc-archive-rail){left:12px!important;right:auto!important}
html.mhc-wayfinding-ready[data-rail-dock="right"] :is(.archive-rail,.mhc-archive-rail){right:12px!important;left:auto!important}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)::before,
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)::after{display:none!important}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-button,.rail-top,.rail-index,.rail-mark,.mhc-rail-action,.mhc-rail-identity,.rail-appearance,.mhc-rail-grip){
  position:relative!important;inset:auto!important;display:grid!important;place-items:center;flex:0 0 auto;
  min-height:var(--elastic-rail-top-well)!important;height:var(--elastic-rail-top-well)!important;
  margin:0!important;padding:0!important;writing-mode:horizontal-tb!important;
  transform:none;opacity:1;visibility:visible;pointer-events:auto!important;touch-action:manipulation;
}
html.mhc-wayfinding-ready :is(.chapter-search,#search-toggle,#mhc-search-toggle,.rail-top,.mhc-rail-top,.rail-appearance,.mhc-rail-grip){width:var(--elastic-rail-top-well)!important;min-width:var(--elastic-rail-top-well)!important}
/* Both search glyphs share a grid cell; the old relative SVG rule stacked them. */
html.mhc-wayfinding-ready :is(.chapter-search,#search-toggle,#mhc-search-toggle)>svg{
  position:absolute!important;inset:0!important;margin:auto!important;width:16px!important;height:16px!important;
}
html.mhc-wayfinding-ready :is(#menu-toggle,#mhc-menu-toggle)::after,
html.mhc-wayfinding-ready :is(.menu-hold-fill,.mhc-menu-hold-fill,.menu-icon--home,.mhc-menu-icon--home){display:none!important}
html.mhc-wayfinding-ready .rail-room-ring{width:36px;height:36px}
html.mhc-wayfinding-ready .rail-room-name{max-width:150px}
html.mhc-wayfinding-ready .mhc-rail-counter-label{max-width:none;overflow:visible;text-overflow:clip}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){
  max-width:none;cursor:pointer;overflow:visible!important;border-radius:999px;
}
html.mhc-wayfinding-ready .mhc-rail-counter{height:var(--elastic-rail-top-well);line-height:var(--elastic-rail-top-well)}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail):not(.is-near):not(:hover):not(:focus-within):not(.has-open-window)>:is(.rail-index,.rail-mark,.mhc-rail-identity){width:36px;min-width:36px}
html.mhc-wayfinding-ready .mhc-section-register.rail-leaf{position:absolute!important;inset:calc(100% + 10px) 0 auto auto;width:max-content!important;max-width:min(390px,calc(100vw - 24px));transform:translateY(-6px);padding:10px 8px!important}
html.mhc-wayfinding-ready .rail-leaf.is-open:not(.is-withheld){opacity:1;visibility:visible;pointer-events:auto;transform:none}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark{min-height:36px}
html.mhc-wayfinding-ready .rail-way{position:relative!important;inset:auto!important;width:auto!important;display:flex;pointer-events:auto!important;margin:0;gap:2px}
html.mhc-wayfinding-ready .rail-way:not(:has(.mhc-xref-return.is-visible)){display:none!important}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return{position:relative!important;inset:auto!important;display:grid!important;width:auto!important;padding:0!important;grid-template-columns:var(--elastic-rail-top-well) auto!important;border-radius:999px}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__icon{min-height:0!important}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__copy{max-width:var(--rail-way-max,240px)}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__copy>small{display:none!important}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return__copy>span{box-sizing:border-box;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding-right:12px!important}
/* The way back is one well, as the room and the section are, read as the
   arrow, the destination it names on approach and the count of jumps that
   opens the trail. The count had been stretched to the well's full height
   and stood beside the arrow as a second well of its own, with its small
   mono figures floating in it, so it is seated inside the one well as a chip
   inset by the same margin on three sides, whose radius is therefore
   concentric with the well's. */
html.mhc-wayfinding-ready .rail-way{
  --rail-way-chip:24px;
  --rail-way-inset:calc((var(--elastic-rail-top-well) - var(--rail-way-chip)) / 2);
  gap:0;
  align-items:center;
  height:var(--elastic-rail-top-well);
  padding-right:var(--rail-way-inset);
  border-radius:var(--elastic-pill);
  background:var(--elastic-rail-well);
  box-shadow:var(--elastic-rail-well-shadow);
}
html.mhc-wayfinding-ready .rail-way .mhc-xref-return{background:transparent;box-shadow:none}
html.mhc-wayfinding-ready .rail-way .mhc-xref-trail-toggle{
  display:grid;
  place-items:center;
  height:var(--rail-way-chip);
  min-height:var(--rail-way-chip);
  max-width:none;
  margin-left:0;
  padding:0 9px;
  /* Tinted from the ink rather than the shadow, so that the chip still reads
     inside the well on black, where a shadow over a shadow shows nothing. */
  background:color-mix(in srgb,currentColor 9%,transparent);
  box-shadow:none;
  font-size:var(--mhc-type-2xs,10px);
  line-height:1;
  letter-spacing:.06em;
}
html.mhc-wayfinding-ready .rail-way .mhc-xref-trail-toggle[hidden]{display:none!important}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .rail-way{flex-direction:column;width:var(--elastic-rail-top-well);height:auto;padding:0 0 var(--rail-way-inset)}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .rail-way .mhc-xref-return__copy{display:none}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .rail-way .mhc-xref-trail-toggle{width:var(--rail-way-chip);padding:0;overflow:hidden;font-size:0;letter-spacing:0}
/* Where the chip is too narrow for "3 jumps" it shows the count alone at the
   10px label floor, rather than the whole phrase shrunk to 8px beneath it. */
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .rail-way .mhc-xref-trail-toggle::before{content:attr(data-count);font-size:var(--mhc-type-2xs,10px)}
html.mhc-wayfinding-ready[data-rail-dock="bottom"] .rail-way .mhc-xref-ledger{top:auto;bottom:calc(100% + 12px);transform-origin:bottom right}
html.mhc-wayfinding-ready[data-rail-dock="left"] .rail-way .mhc-xref-ledger{left:calc(100% + 12px);right:auto;top:auto;bottom:0}
html.mhc-wayfinding-ready[data-rail-dock="right"] .rail-way .mhc-xref-ledger{right:calc(100% + 12px);top:auto;bottom:0}
/* A minimized bar folds its labels but keeps every action available. */
html.mhc-wayfinding-ready .mhc-rail-grip{touch-action:none!important}
/* Header above arrival curtains. The Timeline's first-entry loading page
   covers it, and it arrives with the chapter. */
html.mhc-wayfinding-ready:is(.chapter-transitioning,.timeline-arriving,.frames-arriving,.measurement-arriving,.claims-arriving,.money-arriving,.summary-arriving,.sources-arriving,.about-arriving) :is(.archive-rail,.mhc-archive-rail,.rail-home-card){z-index:1400!important;animation:none!important;opacity:1!important;visibility:visible!important}
@media(max-width:1000px){

  html.mhc-wayfinding-ready body>.rail-home-card>.rail-home i{display:inline}
}
@media(max-width:700px){
  html.mhc-wayfinding-ready{--elastic-rail-top-well:44px;--elastic-rail-top-height:52px;--archive-masthead-band:224px;--elastic-rail-top-band:224px;--mhc-phone-rail-h:0px}
  html.mhc-wayfinding-ready body>.rail-home-card>.rail-home{height:40px;font-size:14px;padding:0 12px}
  html.mhc-wayfinding-ready body>.rail-home-card>.rail-home i{display:inline}
  html.mhc-wayfinding-ready[data-rail-dock="top"] :is(.archive-rail,.mhc-archive-rail){top:120px!important;max-width:calc(100vw - 24px)!important}
  html.mhc-wayfinding-ready .rail-way .mhc-xref-return__copy{display:none!important}
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){width:44px!important;min-width:44px!important}
  html.mhc-wayfinding-ready .rail-way .mhc-xref-trail-toggle{font-size:0;padding:0 4px;max-width:44px}
  html.mhc-wayfinding-ready .rail-way .mhc-xref-trail-toggle::before{content:attr(data-count);font-size:var(--mhc-type-2xs,10px)}
  html.mhc-wayfinding-ready .mhc-rail-grip{display:none!important}
  html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark{min-height:44px}
}
@media print{html.mhc-wayfinding-ready body>.rail-home-card>.rail-home,html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail){display:none!important}}
html.mhc-wayfinding-ready body>.rail-home-card>.rail-home b{margin-left:.22em}
html.mhc-wayfinding-ready .mhc-section-register.rail-leaf{
  display:grid!important;position:fixed!important;z-index:1102;left:var(--rail-leaf-left,0px)!important;top:var(--rail-leaf-top,calc(100% + 10px))!important;
  right:auto!important;bottom:auto!important;clip-path:var(--way-panel-closed,inset(0 0 100% 0 round 20px))!important;transform:none!important;max-height:var(--rail-leaf-height,70svh)!important;
}
html.mhc-wayfinding-ready .rail-leaf.is-open:not(.is-withheld){transform:none!important;clip-path:inset(0 round 20px)!important}
html.mhc-wayfinding-ready .mhc-section-register.rail-leaf .mhc-section-mark{writing-mode:horizontal-tb!important}
@media(max-width:700px){
  html.mhc-wayfinding-ready .mhc-section-register.rail-leaf{width:calc(100vw - 24px)!important}
}
@media(min-width:701px) and (max-width:850px){


}
/* Where the bar and the wordmark share a narrower top edge, the name is
   shortened rather than withheld, and the button's title carries it whole. */
@media(min-width:701px) and (max-width:1100px){
  html.mhc-wayfinding-ready .rail-way{--rail-way-max:150px}
}

/* The compact pin state folds labels in place. Retired sliver transforms may
   not move this capsule; independent translate carries deliberate dock travel. */
html.mhc-wayfinding-ready[data-rail-dock="top"] :is(.archive-rail,.mhc-archive-rail){transform:none!important}
html.mhc-wayfinding-ready[data-rail-dock="bottom"] :is(.archive-rail,.mhc-archive-rail){transform:translateX(-50%)!important}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail){transform:translateY(-50%)!important}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(button,a,.rail-index,.rail-mark,.mhc-rail-identity,.rail-way){opacity:1!important;visibility:visible!important}
html.mhc-wayfinding-ready.mhc-rail-dragging :is(.archive-rail,.mhc-archive-rail){transform:translate(var(--mhc-rail-drag-x,0px),var(--mhc-rail-drag-y,0px)) var(--mhc-rail-anchor) scale(var(--mhc-rail-lift,1))!important}

/* One material and one affordance across the archive's wayfinding surfaces. */
html.mhc-wayfinding-ready{
  --way-hover-surface:color-mix(in srgb,var(--mhc-chapter-color,var(--mhc-accent)) 15%,transparent);
  --way-hover-border:color-mix(in srgb,var(--mhc-ink) 16%,transparent);
}
html.mhc-wayfinding-boot:not(.mhc-wayfinding-ready) :is(.archive-rail,.mhc-archive-rail,.archive-masthead-mark,.archive-masthead-note,.archive-corner-toggle){visibility:hidden!important}
html.mhc-wayfinding-ready .rail-home-card{
  position:fixed;z-index:1101;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));
  width:max-content;max-width:calc(100vw - 24px);border-radius:22px;overflow:clip;
  color:var(--mhc-ink);background:var(--elastic-capsule-surface);box-shadow:var(--elastic-capsule-shadow);
  backdrop-filter:var(--elastic-capsule-blur);-webkit-backdrop-filter:var(--elastic-capsule-blur);
  transition:border-radius .42s var(--elastic-ease);
}
html.mhc-wayfinding-ready .rail-home-card>.rail-home{max-width:100%;white-space:normal;flex-wrap:wrap;min-height:44px;height:auto;line-height:1.3;padding-block:12px}
.rail-home-details{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .48s var(--elastic-ease),opacity .22s ease}
.rail-home-footer{min-height:0;overflow:clip;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px 0 16px;font:400 11px/1.4 var(--sans,Helvetica,Arial,sans-serif);letter-spacing:.015em}
.rail-home-scope{display:block;padding-block:0;color:color-mix(in srgb,var(--mhc-ink) 76%,transparent)}
.rail-home-footer>span{white-space:nowrap}
html.mhc-wayfinding-ready .rail-home-card:is(:hover,:focus-within) .rail-home-details{grid-template-rows:1fr;opacity:1}
html.mhc-wayfinding-ready .rail-home-card .rail-appearance{margin:0 0 4px!important;flex-shrink:0}
/* Keep the appearance button keyboard reachable. Its focus expands the card. */
@media(hover:none){.rail-home-details{grid-template-rows:1fr;opacity:1}}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(button:not(.mhc-rail-grip),.rail-index,.rail-mark,.mhc-rail-identity),
html.mhc-wayfinding-ready :is(.rail-home,.rail-appearance,.rail-leaf .mhc-section-mark,.rail-way button){
  transition:background .25s ease,box-shadow .25s ease,color .25s ease,translate .3s var(--elastic-ease),opacity .2s ease;
}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(button:not(.mhc-rail-grip),.rail-index,.rail-mark,.mhc-rail-identity):is(:hover,:focus-visible),
html.mhc-wayfinding-ready :is(.rail-home,.rail-appearance,.rail-leaf .mhc-section-mark,.rail-way button):is(:hover,:focus-visible){
  background:var(--way-hover-surface)!important;box-shadow:inset 0 0 0 1px var(--way-hover-border)!important;color:var(--mhc-ink)!important;translate:none;
}
/* The room and the section trade their well for the hover surface, whereas
   the way back laid that surface over its well, which gave the plate two
   translucencies at once; so the well itself takes the surface when the way
   back is approached, and the button inside it stays clear. */
html.mhc-wayfinding-ready .rail-way .mhc-xref-return:is(:hover,:focus-visible){background:transparent!important;box-shadow:none!important}
html.mhc-wayfinding-ready .rail-way:has(>.mhc-xref-return:is(:hover,:focus-visible)){background:var(--way-hover-surface);box-shadow:inset 0 0 0 1px var(--way-hover-border)}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(button,.rail-index,.rail-mark,.mhc-rail-identity):focus-visible,
html.mhc-wayfinding-ready :is(.rail-home,.rail-appearance,.rail-leaf .mhc-section-mark):focus-visible{outline:2px solid var(--mhc-ink);outline-offset:2px}
/* Search and the way to the top stand as bare glyphs at rest, as the pin
   does, so that the two capsules carrying the room and the section are the
   only wells along the bar; the hover and open rules above keep their surface
   because they are marked important and this rest rule is not. */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.chapter-search,#search-toggle,#mhc-search-toggle,.rail-top,.mhc-rail-top,.mhc-rail-grip){
  background:transparent;box-shadow:none;
}
/* The pin shares the top link's round lens, rather than search's outlined
   hover plate. Its full well is already a target, so it needs no overlap. */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>.mhc-rail-grip{cursor:grab}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>.mhc-rail-grip::after{inset:0}
/* A separate hairline leaves the search glyph's centering untouched. It
   stands 10px from the section well's rim and 14px from the search glyph,
   which is where the eye puts the middle of the gap once the glyph stands
   bare at rest, and it still keeps 4px clear of the search control's lens. */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.chapter-search,#search-toggle,#mhc-search-toggle){margin-left:13px!important;overflow:visible!important}
html.mhc-wayfinding-ready :is(.chapter-search,#search-toggle,#mhc-search-toggle)::before{
  content:"";display:block;position:absolute;left:-5px;top:9px;width:1px;height:18px;
  background:var(--way-hover-border);border:0;box-shadow:none;transform:none;opacity:1;
}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail)>:is(.chapter-search,#search-toggle,#mhc-search-toggle){margin-left:0!important;margin-top:13px!important}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.chapter-search,#search-toggle,#mhc-search-toggle)::before{left:9px;top:-5px;width:18px;height:1px}
/* The section well and the way back are the two parts that are read beside
   the room, so each takes the well gap rather than the tools' 2px. An empty
   identity keeps its own collapse, and the phone, whose section well wraps to
   a row of its own, keeps the layout its own layer gives it. */
@media(min-width:701px){
  html.mhc-wayfinding-ready:not([data-rail-dock="left"]):not([data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity):not(.is-empty){margin-left:calc(var(--elastic-rail-well-gap) - 2px)!important}
  html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity):not(.is-empty){margin-top:calc(var(--elastic-rail-well-gap) - 2px)!important}
  html.mhc-wayfinding-ready:not([data-rail-dock="left"]):not([data-rail-dock="right"]) .rail-way{margin-inline:calc(var(--elastic-rail-well-gap) - 2px)!important}
  html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .rail-way{margin-block:calc(var(--elastic-rail-well-gap) - 2px)!important}
}


/* The numeral occupies one whole well, regardless of how many Roman letters
   it contains. The name is measured independently of the folded width. */
html.mhc-wayfinding-ready .mhc-rail-counter-item{inset:0 auto auto 0!important;gap:0;padding:0}
html.mhc-wayfinding-ready .mhc-rail-counter-no{display:grid;place-items:center;width:var(--mhc-counter-prefix,var(--elastic-rail-top-well));height:100%;text-align:center}
html.mhc-wayfinding-ready .mhc-rail-counter-label{padding-right:12px}
html.mhc-wayfinding-ready .mhc-rail-counter-label:empty{display:none!important;padding:0}

html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail).has-open-window>:is(button,.rail-index,.rail-mark,.mhc-rail-identity){width:var(--rail-held-w)!important;min-width:var(--rail-held-w)!important;transition:none}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail).has-open-window .rail-room-name{width:var(--rail-room-name-w);opacity:1}
/* Shared material, clearance, and reveal for all expanded windows. */
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel,.mhc-xref-ledger,.mhc-section-register.rail-leaf,.rail-era-preview,.rail-filter-panel){
  border:0!important;border-radius:20px!important;
  background:var(--elastic-capsule-surface)!important;color:var(--mhc-ink)!important;
  box-shadow:var(--elastic-capsule-shadow)!important;
  backdrop-filter:var(--elastic-capsule-blur)!important;-webkit-backdrop-filter:var(--elastic-capsule-blur)!important;
  clip-path:var(--way-panel-closed,inset(0 0 100% 0 round 20px))!important;
  transform:none!important;
  transition:clip-path .48s var(--elastic-ease),opacity .18s ease,visibility 0s linear .48s!important;
}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel){
  z-index:1050!important;left:var(--way-panel-left,12px)!important;top:var(--way-panel-top,68px)!important;right:auto!important;bottom:auto!important;
  width:min(480px,calc(100vw - 24px))!important;height:auto!important;max-height:var(--way-panel-height,70svh)!important;
}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-shell{min-height:0;padding:24px!important}
html.mhc-wayfinding-ready .rail-way .mhc-xref-ledger{left:var(--way-panel-left)!important;top:var(--way-panel-top)!important;right:auto!important;bottom:auto!important;max-height:var(--way-panel-height,70svh)!important;overflow:auto}
/* Reading the trail needs an opaque ground. Keep the common capsule edge
   and shadow, with no page copy showing through in either theme. */
html.mhc-wayfinding-ready .rail-way .mhc-xref-ledger{
  background:rgb(var(--mhc-float-rgb))!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.mhc-wayfinding-ready body:is(.chapter-search-open,.search-open) :is(.chapter-search-panel,.search-panel),
html.mhc-wayfinding-ready .rail-way.is-ledger-open .mhc-xref-ledger,
html.mhc-wayfinding-ready .rail-leaf.is-open:not(.is-withheld){clip-path:inset(0 round 20px)!important;transition-delay:0s!important}
@media(max-width:700px){
  html.mhc-wayfinding-ready .rail-home-card>.rail-home{font-size:14px;min-height:40px;padding-block:10px}
  html.mhc-wayfinding-ready .rail-home-card{max-width:calc(100vw - 24px)}
  html.mhc-wayfinding-ready .rail-home-details{grid-template-rows:1fr;opacity:1}
  html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-shell{padding:20px!important}
}
@media(prefers-reduced-motion:reduce){
  html.mhc-wayfinding-ready :is(.rail-home-details,.rail-home-card,.archive-rail,.mhc-archive-rail,.chapter-search-panel,.search-panel,.rail-leaf,.mhc-xref-ledger,.rail-era-preview,.rail-filter-panel),
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail,.rail-home-card) *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{.rail-home-card{display:none!important}}

/* Opening a window keeps the chapter identity intact as focus enters it. */
html.mhc-wayfinding-ready :is(#menu-toggle,#mhc-menu-toggle) :is(.menu-icon,.mhc-menu-icon){display:none!important}
html.mhc-wayfinding-ready :is(#menu-toggle,#mhc-menu-toggle) .rail-room-ring{opacity:1!important}

/* Stable affordances: highlights change ink and surface, never placement. */
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(button,a,.rail-index,.rail-mark,.mhc-rail-identity){border-radius:999px!important;translate:none!important}
html.mhc-wayfinding-ready .rail-home-card :is(.rail-home,.rail-appearance){translate:none!important}
html.mhc-wayfinding-ready .rail-room{padding:0}
html.mhc-wayfinding-ready .rail-room-name{width:var(--rail-room-name-w);opacity:1;max-width:none}
html.mhc-wayfinding-ready .mhc-rail-counter-label{display:block!important;width:auto!important;max-width:none!important;opacity:1!important;white-space:nowrap;line-height:1.25!important;text-overflow:clip!important}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){
  width:var(--mhc-counter-w);min-width:0!important;max-width:none;
  height:var(--mhc-counter-h,var(--elastic-rail-top-well))!important;
  transition:width .5s var(--elastic-ease),height .5s var(--elastic-ease),margin .5s var(--elastic-ease),opacity .3s ease .12s,visibility 0s,background .25s ease,box-shadow .25s ease;
}
html.mhc-wayfinding-ready .mhc-rail-counter{height:100%;line-height:1.25}
html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity).is-empty{
  display:grid!important;width:0!important;min-width:0!important;max-width:0;margin-inline:-1px!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:width .5s var(--elastic-ease),height .5s var(--elastic-ease),margin .5s var(--elastic-ease),opacity .18s ease,visibility 0s linear .5s;
}
/* Side docks keep one centered track. Chapter and section names follow the
   vertical axis, while tool glyphs and numerals retain their upright reading. */
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail){width:44px!important;align-items:center;max-height:calc(100svh - 80px)}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(#menu-toggle,#mhc-menu-toggle){width:36px!important;height:calc(36px + var(--rail-room-name-w,60px))!important}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .rail-room{flex-direction:column;width:36px;padding:0}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .rail-room-name{width:36px!important;height:var(--rail-room-name-w,60px);writing-mode:vertical-rl;line-height:36px;overflow:visible}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .rail-room-name>span{width:auto;padding:8px 0 12px}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){
  width:36px!important;min-width:36px!important;height:min(var(--mhc-counter-w),max(100px,calc(100svh - 380px)))!important;min-height:0!important;
}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .mhc-rail-counter-item{width:36px;height:100%;flex-direction:column;gap:0}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .mhc-rail-counter-no{writing-mode:vertical-rl!important;flex:0 0 var(--mhc-counter-prefix,36px);height:var(--mhc-counter-prefix,36px);width:36px}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) .mhc-rail-counter-label{writing-mode:vertical-rl!important;text-orientation:mixed;white-space:normal;flex:1 1 auto;min-height:0;width:36px!important;padding:0 0 12px;align-content:center;text-align:left}
html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity).is-empty{height:0!important;min-height:0!important;max-width:36px;margin: -1px 0!important}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark-index{width:30px;text-align:center}
html.mhc-wayfinding-ready .rail-leaf .mhc-section-mark{translate:none!important}
/* The pin controls the resting labels in every desktop dock. The controller
   clears is-folded on approach, focus, an open window or a drag. Glyphs,
   chapter numbers, section numbers and return actions remain available. */
@media(min-width:701px){
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail).is-folded .rail-room-name{width:0!important;height:0!important;overflow:hidden;opacity:0}
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail).is-folded .mhc-rail-counter-label{display:none!important}
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail).is-folded>:is(.rail-index,.rail-mark,.mhc-rail-identity):not(.is-empty){width:var(--mhc-counter-prefix,var(--elastic-rail-top-well))!important}
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail).is-folded .mhc-xref-return__copy{display:none!important}
  html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail).is-folded>:is(#menu-toggle,#mhc-menu-toggle){height:var(--elastic-rail-top-well)!important}
  html.mhc-wayfinding-ready:is([data-rail-dock="left"],[data-rail-dock="right"]) :is(.archive-rail,.mhc-archive-rail).is-folded>:is(.rail-index,.rail-mark,.mhc-rail-identity):not(.is-empty){height:var(--mhc-counter-prefix,var(--elastic-rail-top-well))!important}
}
/* Unpinned, the folded bar withdraws past the edge it rests against and
   leaves a sliver of its own glass there, while its wells fade so that no
   half of a glyph shows in the strip, and the controller brings it back on
   the same approach, focus, open window or drag that unfolds its labels.
   The travel is the independent translate, because the transform belongs to
   the dock's anchor and to the drag, and it is limited to a pointer that can
   approach, since a touch screen would have no way to call the bar back and
   so keeps the folded capsule where it stands. The slide is armed only after
   the bar's first frame, which lets an unpinned reader arrive in a chapter
   with the bar already withdrawn instead of watching it leave each time. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
  html.mhc-wayfinding-ready:not(.mhc-rail-dragging):not(.mhc-rail-settling) body.mhc-rail-minimized :is(.archive-rail,.mhc-archive-rail).is-folded{--mhc-rail-sliver:var(--elastic-rail-minimized-width,10px)}
  html.mhc-wayfinding-ready[data-rail-dock="top"]:not(.mhc-rail-dragging):not(.mhc-rail-settling) body.mhc-rail-minimized :is(.archive-rail,.mhc-archive-rail).is-folded{translate:0 calc(var(--mhc-rail-sliver) - 100% - max(12px,env(safe-area-inset-top)))}
  html.mhc-wayfinding-ready[data-rail-dock="bottom"]:not(.mhc-rail-dragging):not(.mhc-rail-settling) body.mhc-rail-minimized :is(.archive-rail,.mhc-archive-rail).is-folded{translate:0 calc(100% + max(12px,env(safe-area-inset-bottom)) - var(--mhc-rail-sliver))}
  html.mhc-wayfinding-ready[data-rail-dock="left"]:not(.mhc-rail-dragging):not(.mhc-rail-settling) body.mhc-rail-minimized :is(.archive-rail,.mhc-archive-rail).is-folded{translate:calc(var(--mhc-rail-sliver) - 100% - 12px) 0}
  html.mhc-wayfinding-ready[data-rail-dock="right"]:not(.mhc-rail-dragging):not(.mhc-rail-settling) body.mhc-rail-minimized :is(.archive-rail,.mhc-archive-rail).is-folded{translate:calc(100% + 12px - var(--mhc-rail-sliver)) 0}
  html.mhc-wayfinding-ready:not(.mhc-rail-dragging):not(.mhc-rail-settling) body.mhc-rail-minimized :is(.archive-rail,.mhc-archive-rail).is-folded>*{opacity:0!important;pointer-events:none!important}
}
@media(min-width:701px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail).is-fold-ready{transition:box-shadow .24s ease,opacity .18s ease,translate .42s var(--elastic-ease,cubic-bezier(.16,1,.3,1))}
}
@media(max-width:700px){
  html.mhc-wayfinding-ready[data-rail-dock="top"] :is(.archive-rail,.mhc-archive-rail){flex-wrap:wrap;height:auto!important;border-radius:24px!important;justify-content:flex-end}
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){order:10;flex-basis:100%;width:calc(100vw - 32px)!important;min-height:44px!important}
  html.mhc-wayfinding-ready .mhc-rail-counter-item{width:100%}
  html.mhc-wayfinding-ready .mhc-rail-counter-label{white-space:normal;flex:1 1 auto;min-width:0}
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity).is-empty{flex-basis:0;min-height:0!important;height:0!important;margin:0!important}
}
/* Search is sized by its content; populated results scroll within the viewport. */
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-results{min-height:0!important}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-line input{font-size:28px!important;line-height:1.2;padding-bottom:10px}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-prompt{padding:20px 0 0!important;gap:20px}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-prompt-copy b{font-size:22px;line-height:1.15;max-width:24ch}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-prompt-copy p{margin-top:10px;font-size:12px;line-height:1.5}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-shortcuts .search-result{min-height:52px;grid-template-columns:minmax(0,1fr) 20px;padding:12px 0;align-items:center;gap:12px}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-shortcuts .search-result-title{font-size:17px;line-height:1.25;grid-column:1;grid-row:1}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-shortcuts .search-result-arrow{grid-column:2;grid-row:1;align-self:center}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-result::before{inset:3px -10px;transform:none!important;border:1px solid transparent;transition:opacity .25s ease,border-color .25s ease}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-result:is(:hover,:focus-visible)::before{inset:3px -10px;border-color:var(--way-hover-border)}
html.mhc-wayfinding-ready :is(.chapter-search-panel,.search-panel) .search-result:is(:hover,:focus-visible) :is(.search-result-title,.search-result-meta,.search-result-arrow){transform:none!important}
@media(prefers-reduced-motion:reduce){
  html.mhc-wayfinding-ready :is(.archive-rail,.mhc-archive-rail)>:is(.rail-index,.rail-mark,.mhc-rail-identity){transition:none!important}
}

/* Era context belongs to the unified control; full banners stay in flow. */
html.mhc-wayfinding-ready .journey-reader-compact{display:none!important}
.rail-era-preview{position:fixed;z-index:1103;left:var(--way-panel-left,12px);top:var(--way-panel-top,68px);width:min(340px,calc(100vw - 24px));box-sizing:border-box;padding:20px;opacity:0;visibility:hidden;pointer-events:none}
html.mhc-wayfinding-ready .rail-era-preview.is-open{opacity:1;visibility:visible;pointer-events:auto;clip-path:inset(0 round 20px)!important;transition-delay:0s!important}
.rail-era-preview strong{display:block;font-size:18px;font-weight:500;line-height:1.25;text-wrap:balance}
.rail-era-preview>span{display:block;margin-top:8px;font:11px/1.5 var(--mono);color:var(--mhc-ink-muted,var(--mhc-ink))}
.rail-era-preview p{margin:14px 0 0;font-size:14px;line-height:1.5;text-wrap:pretty}
.rail-era-preview p:empty{display:none}
.rail-era-overview{display:none}
html.mhc-wayfinding-ready .rail-era-overview{display:block;border:0;border-top:1px solid var(--elastic-capsule-border,rgba(128,128,128,.25));background:transparent;color:inherit;padding:12px;margin:8px 4px 0;text-align:left;font:inherit;font-size:13px;border-radius:0 0 12px 12px;cursor:pointer}
html.mhc-wayfinding-ready .rail-era-overview:is(:hover,:focus-visible){background:var(--elastic-control-hover,rgba(128,128,128,.12))}

/* Timeline contributes one well to the common bar, only for its own chapter. */
html.mhc-wayfinding-ready #timeline-filter-toggle{order:4;grid-column:1;grid-row:auto;width:var(--elastic-rail-top-well)!important;min-width:var(--elastic-rail-top-well)!important;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none!important;color:var(--mhc-ink)}
html.mhc-wayfinding-ready #timeline-filter-toggle:is(:hover,:focus-visible,[aria-expanded="true"]){background:var(--way-hover-surface);box-shadow:inset 0 0 0 1px var(--way-hover-border)}
html.mhc-wayfinding-ready #timeline-filter-toggle .timeline-filter-trigger-icon svg{width:16px;height:16px}
html.mhc-wayfinding-ready .rail-filter-panel{
  --filter-line:color-mix(in srgb,var(--mhc-ink) 17%,transparent);
  --filter-muted:color-mix(in srgb,var(--mhc-ink) 76%,transparent);
  position:fixed!important;z-index:1102;left:var(--way-panel-left,12px)!important;top:var(--way-panel-top,68px)!important;right:auto!important;bottom:auto!important;
  width:min(384px,calc(100vw - 24px));max-height:var(--way-panel-height,70svh)!important;padding:20px;box-sizing:border-box;
}
html.mhc-wayfinding-ready .rail-filter-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;clip-path:inset(0 round 20px)!important;transition-delay:0s!important}