/* ==========================================================================
   THE SIDE RAIL. Loaded only by the four Version B routes.

   Reference as principle: 21st.dev is a persistent left rail and then the
   goods. Two things deliberately not taken from it — the icons, because this
   product shows behaviour instead of symbols, and the dark chrome, because the
   dark room belongs to the collection. This is the white wall.
   ========================================================================== */

.sideshell {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  min-height: 100vh;
}
.sideshell > main { min-width: 0; padding-inline: var(--s6); padding-block-end: var(--s9); }
/* The content column is its own measure; the house .wrap re-centres inside a
   column that is already the right width, which left the rail with a second
   gutter beside it. */
.sideshell .wrap { max-width: none; padding: 0; }

.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--rule);
  padding: var(--s5) var(--s4) var(--s5) var(--s5);
  display: flex; flex-direction: column; gap: var(--s5);
  /* COMPANY CHROME (founder, 2026-09-24): the rail carries the house ground
     at the visitor's theme on every page. Without an explicit background it
     borrowed each page's field — cream on Swiss, a room's own tint in the
     galleries — and the navigation read as part of the exhibit. The page
     may declare its ground; the rail keeps the company's. */
  background: var(--paper);
}

.rail__mark { display: block; }
.rail__mark img { width: 8.5rem; height: auto; display: block; }

.rail__search input {
  width: 100%; font: var(--t-sm)/1 var(--ui);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule); background: var(--paper-deep);
  color: var(--ink); border-radius: 0;
}
.rail__search input::placeholder { color: var(--ink-3); }
.rail__search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.rail__nav { flex: 1; }
.rail__label {
  margin: var(--s5) 0 var(--s2);
  font: var(--t-xs)/1 var(--mono); color: var(--ink-3);
}
.rail__nav > p:first-child { margin-top: 0; }
.rail__nav ul { list-style: none; margin: 0; padding: 0; }
.rail__nav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  min-height: 32px; padding: var(--s1) var(--s3);
  font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.rail__nav a:hover, .rail__nav a:focus-visible {
  color: var(--brand); background: var(--brand-wash); border-inline-start-color: var(--brand-edge);
}
/* WHERE YOU ARE — the same fill and leading edge the docs index and the
   navigation dropdown already use. One vocabulary for "this one". */
.rail__nav a[aria-current="page"] {
  color: var(--brand); background: var(--brand-wash); border-inline-start-color: var(--brand);
}
/* The figure beside a destination. Tabular, so a column of them lines up. */
.rail__nav b {
  font: var(--t-xs)/1 var(--mono); font-weight: 400; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rail__nav a[aria-current="page"] b { color: var(--brand); }

/* ON THIS PAGE, NESTED. A page's sections sit inside the current item, one
   step in, on the current item's own leading edge — a continuation of where
   you are, not a new place to go. Smaller type, no counts, quiet until
   hovered. */
.rail__sub { border-inline-start: 2px solid var(--brand-edge); margin-inline-start: var(--s3); }
.rail__sub a {
  min-height: 26px; padding: 2px var(--s3);
  font: var(--t-xs)/1.5 var(--ui); color: var(--ink-3);
  border-inline-start: 0;
}
.rail__sub a:hover, .rail__sub a:focus-visible { color: var(--brand); background: none; }
.rail__sub a[aria-current="location"] { color: var(--ink); background: none; }

.rail__alpha a { color: inherit; text-decoration: none; }
.rail__alpha a:hover, .rail__alpha a:focus-visible { color: var(--brand); }

.rail__alpha {
  margin: 0; padding-block-start: var(--s4);
  border-top: 1px solid var(--rule);
  font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3);
}

/* ------------------------------------------------------------- narrow ----- */

/* Below the breakpoint the rail stops being a rail: it becomes a strip across
   the top, scrollable sideways, because a 15rem column on a 375px screen is
   most of the screen. */
@media (max-width: 60rem) {
  .sideshell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static; height: auto; border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: var(--s4) var(--s4) 0;
    gap: var(--s3);
  }
  .rail__nav { display: flex; gap: var(--s4); overflow-x: auto; padding-block-end: var(--s2); }
  .rail__label { display: none; }
  .rail__nav ul { display: flex; gap: var(--s1); }
  .rail__nav a { white-space: nowrap; border-inline-start: 0; border-bottom: 2px solid transparent; }
  .rail__nav a[aria-current="page"] { border-inline-start: 0; border-bottom-color: var(--brand); }
  .rail__alpha { display: none; }
  .sideshell > main { padding-inline: var(--s4); }
}

/* Visually hidden, still announced. Several headings and one label are now
   carried by the rail or by the object itself, but the document still needs
   its structure for a screen reader. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* The one-line honesty chip that replaced a status line and an intro. */
.chipb {
  display: inline-block; vertical-align: middle;
  margin-inline-start: var(--s3); transform: translateY(-0.15em);
  font: var(--t-xs)/1 var(--mono); letter-spacing: 0.02em;
  color: var(--paper); background: var(--ink);
  padding: var(--s2) var(--s3);
}

/* THE TITLE IS A LABEL, NOT A HERO.
   On a gallery the goods are the hero. A display-xl title spends a third of
   the first screen announcing which page you are already on — 21st.dev sets
   these at list-heading size and puts the collection straight underneath. */
.sideshell .display { font-size: var(--t-display-md); margin-block: 0 var(--s4); }
.sideshell .leaf { padding-block: var(--s5) 0; border-top: 0; }

/* The pairing note, at the foot. It exists for the A/B review and comes out
   when the review does. */
.vbfoot {
  margin: var(--s8) 0 0; padding-block-start: var(--s3);
  border-top: 1px solid var(--rule);
  font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3);
}

.rail__foot { display: grid; gap: var(--s3); padding-block-start: var(--s4); border-top: 1px solid var(--rule); }
.rail__alpha { margin: 0; padding: 0; border: 0; }
.rail__legal { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.rail__legal a { font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); text-decoration: none; }
.rail__legal a:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 60rem) { .rail__foot { display: none; } }

/* On the strip the groups ran into each other — "Open questions Mix" reads as
   one list. The labels come back as inline dividers rather than headings. */
@media (max-width: 60rem) {
  .rail__label {
    display: block; align-self: center; white-space: nowrap;
    margin: 0; padding-inline-end: var(--s2);
    border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s3);
  }
  .rail__nav > p:first-child { border-inline-start: 0; padding-inline-start: 0; }
}

/* ---------------------------------------------------------- the top bar --- */

/* WHAT THE RAIL DROPPED. Replacing the masthead with a rail silently took the
   alpha call to action and Contact off every B route — the shell's one primary
   action, gone. 21st.dev runs a rail AND a thin utility row; this is that row,
   carrying the two things that actually work.
   
   It is NOT an account strip. There is no authentication, so there is no
   avatar and no sign-in: the product's own rule is that an unbuilt feature is
   never dressed as a built one, which is why the footer's social marks are
   spans rather than links. The slot is here when accounts are. */
.topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s4);
  min-height: 3rem; margin-block-end: var(--s2);
}
.topbar a {
  font: var(--t-sm)/1 var(--ui); color: var(--ink-2); text-decoration: none;
}
.topbar a:hover { color: var(--brand); text-decoration: underline; }
/* `.topbar a` is (0,1,1) and beat a bare `.topbar__cta` on colour, which put
   --ink-2 text on the --ink slab at 2.24:1. Matched specificity, not
   !important. */
.topbar a.topbar__cta {
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s4); font-weight: 500;
}
.topbar a.topbar__cta:hover { background: var(--brand); color: var(--paper); text-decoration: none; }

.rail__legal--first a { color: var(--ink-2); }
.rail__legal a[aria-current="page"] { color: var(--brand); }

@media (max-width: 60rem) {
  .topbar { min-height: 2.5rem; gap: var(--s3); }
}

/* ------------------------------------------------- the rail after dark ---- */

/* No second skin. `body.night` re-declares the house tokens and every rule
   above resolves from them, so the rail goes dark with the room. Two things
   the tokens cannot do on their own: */

/* The wordmark artwork is near-black ink and flips to white in the dark —
   the same file, the same treatment the masthead already uses. */
.night .rail__mark img { filter: invert(1); }

/* Full-bleed tracks were measured against the VIEWPORT
   (`calc((100vw - var(--page)) / 2 + var(--s5))`), which assumed the content
   column was centred in it. With a rail the column is offset, so a shelf bled
   past the right edge and started short on the left. They bleed to the
   content column instead: out by main's padding, and back in by the same. */
.sideshell .shelfc__track {
  margin-inline: calc(var(--s6) * -1);
  padding-inline: var(--s6);
}
@media (max-width: 60rem) {
  .sideshell .shelfc__track { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
}

/* The Aesthetics search, in the top bar (founder, 2026-09-26). */
.topbar__search {
  margin-inline-end: auto; width: min(22rem, 100%); padding: var(--s2) var(--s3);
  font: var(--t-sm)/1.3 var(--ui); color: var(--ink); background: var(--paper-3); border: 1px solid var(--rule-firm);
}
.topbar__search::placeholder { color: var(--ink-3); }

/* Coming soon: a disclosure in the rail (2026-09-26). */
.rail__more > summary { cursor: pointer; list-style: none; }
.rail__more > summary::-webkit-details-marker { display: none; }
.rail__more > summary::after { content: " +"; color: var(--ink-3); font-weight: 400; }
.rail__more[open] > summary::after { content: " −"; }

/* One list, then Coming soon under a hairline (2026-09-26). */
.rail__nav > .rail__home li + li { margin-top: 2px; }
.rail__more { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.rail__more > summary.rail__label { margin: 0 0 var(--s1); padding-inline: 12px; color: var(--ink-3); font-weight: 500; }

/* ==========================================================================
   THE RAIL, REBUILT (founder, 2026-09-26, after 21st.dev).
   One left edge for everything: the wordmark, search, group labels and the
   item glyphs all start on the rail's padding line. An item's highlight
   bleeds out past that edge instead of indenting the text. Rows are 40px,
   groups breathe, and the foot is a ? menu beside the theme switch.
   ========================================================================== */
.rail { gap: var(--s5); padding: var(--s5) var(--s4) var(--s4) var(--s5); }
.rail__mark img { width: 8rem; }
.rail__search { position: relative; }
.rail__search input { padding: 0.6rem var(--s3); padding-right: 2.75rem; border-color: var(--rule-firm); }
.rail__kbd { position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%); font: var(--t-xs)/1 var(--mono); color: var(--ink-3); border: 1px solid var(--rule-firm); padding: 2px 5px; pointer-events: none; }
.rail__nav .rail__label { margin: var(--s5) 0 var(--s2); font: 500 var(--t-xs)/1 var(--ui); letter-spacing: 0; color: var(--ink-3); }
.rail__nav > .rail__label:first-child { margin-top: 0; }
.rail__nav ul li + li { margin-top: 2px; }
.rail__nav a {
  align-items: center; justify-content: flex-start; gap: var(--s3);
  min-height: 40px; margin-inline: calc(-1 * var(--s2)); padding: 0 var(--s2);
  border-inline-start: 0; font: var(--t-base)/1.2 var(--ui); color: var(--ink-2);
}
.rail__nav a > span { flex: 1; }
.rail__nav a:hover, .rail__nav a:focus-visible { background: var(--paper-3); color: var(--ink); }
.rail__nav a[aria-current="page"] { background: var(--paper-3); color: var(--ink); box-shadow: inset 2px 0 0 var(--brand); }
.rail__ic { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.rail__nav a:hover .rail__ic, .rail__nav a[aria-current="page"] .rail__ic { color: var(--brand); }
.rail__nav a[aria-current="page"] b { color: var(--ink-2); }
/* On-this-page links sit under the current item's text, not its glyph. */
.rail__sub { margin: 2px 0 var(--s2) calc(16px + var(--s3)); border-inline-start: 1px solid var(--rule-firm); }
.rail__sub a { min-height: 30px; margin-inline: 0; padding-inline: var(--s3); font-size: var(--t-sm); }
/* Coming soon: quiet, folded, on the same edge. */
.rail__more { margin-top: var(--s5); padding-top: var(--s3); }
.rail__more > summary.rail__label { padding-inline: 0; }
.rail__more ul a { min-height: 34px; font-size: var(--t-sm); }
/* The foot: ? menu and theme, one row. */
.rail__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block-start: var(--s3); }
.rail__foot .themeswitch { order: 2; }
.rail__help { position: relative; order: 1; }
.rail__help > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--rule-firm); border-radius: 50%; font: 600 var(--t-sm)/1 var(--ui); color: var(--ink-2); }
.rail__help > summary::-webkit-details-marker { display: none; }
.rail__help > summary:hover, .rail__help[open] > summary { color: var(--ink); border-color: var(--ink-3); }
.rail__help ul { position: absolute; bottom: calc(100% + var(--s2)); left: 0; min-width: 12rem; list-style: none; margin: 0; padding: var(--s1) 0; background: var(--paper-deep); border: 1px solid var(--rule-firm); z-index: 5; }
.rail__help a { display: block; padding: var(--s2) var(--s3); font: var(--t-sm)/1.2 var(--ui); color: var(--ink-2); text-decoration: none; }
.rail__help a:hover, .rail__help a[aria-current="page"] { color: var(--ink); background: var(--paper-3); }

/* No rail search on this page (e.g. Aesthetics, whose search is in the top bar): keep the gap under the wordmark. */
.rail__body > .rail__nav:first-child { margin-top: var(--s3); }
.rail__body { display: flex; flex-direction: column; gap: var(--s5); flex: 1; }

/* Coming soon as a rail row (2026-09-26). */
.rail__more { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.rail__more > summary {
  display: flex; align-items: center; gap: var(--s3); min-height: 40px; margin-inline: calc(-1 * var(--s2)); padding: 0 var(--s2);
  list-style: none; cursor: pointer; font: var(--t-base)/1.2 var(--ui); color: var(--ink-2);
}
.rail__more > summary::-webkit-details-marker { display: none; }
.rail__more > summary::after { content: none; }
.rail__more > summary > span { flex: 1; }
.rail__more > summary b { font: var(--t-xs)/1 var(--mono); font-weight: 400; color: var(--ink-3); }
.rail__more > summary:hover { background: var(--paper-3); color: var(--ink); }
.rail__chev { color: var(--ink-3); transition: transform 0.15s ease-out; }
.rail__more[open] .rail__chev { transform: rotate(90deg); }
.rail__more ul { margin-top: 2px; }
.rail__more ul a { align-items: flex-start; min-height: 0; padding-block: var(--s2); }
.rail__more ul a .rail__ic { margin-top: 2px; }
.rail__more ul a > span { font: var(--t-sm)/1.25 var(--ui); color: var(--ink-2); }
.rail__more ul a i { display: block; margin-top: 2px; font: var(--t-xs)/1.3 var(--ui); font-style: normal; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .rail__chev { transition: none; } }

/* The ? and the theme switch: one shape, the house square. */
.rail__help > summary { border-radius: 0; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.rail__foot .themeswitch { width: 32px; height: 32px; min-height: 32px; padding: 0; }
.rail__help ul { display: none; }
.rail__helpmenu { position: absolute; bottom: calc(100% + var(--s2)); left: 0; width: 15rem; padding: var(--s2) 0; background: var(--paper-deep); border: 1px solid var(--rule-firm); z-index: 5; }
.rail__helph { margin: var(--s2) var(--s3) var(--s1); font: 500 var(--t-xs)/1 var(--ui); color: var(--ink-3); }
.rail__helph:first-child { margin-top: var(--s1); }
.rail__helpmenu > a { display: block; padding: var(--s2) var(--s3); font: var(--t-sm)/1.2 var(--ui); color: var(--ink-2); text-decoration: none; }
.rail__helpmenu > a:hover, .rail__helpmenu > a[aria-current="page"] { color: var(--ink); background: var(--paper-3); }
.rail__helplegal { margin: var(--s2) 0 0; padding: var(--s2) var(--s3) var(--s1); border-top: 1px solid var(--rule); font: var(--t-xs)/1.4 var(--ui); color: var(--ink-3); }
.rail__helplegal a { color: var(--ink-3); text-decoration: none; }
.rail__helplegal a:hover { color: var(--ink); text-decoration: underline; }

/* Soon, as 21st marks New: a small pill, used sparingly. */
.rail__soon { font: 500 var(--t-xs)/1 var(--ui); font-style: normal; color: var(--ink-3); border: 1px solid var(--rule-firm); padding: 3px 6px; }
.rail__nav a:has(.rail__soon) > span { color: var(--ink-3); }
/* The foot: You on the left, ? and theme on the right. */
.rail__foot { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.rail__you { order: 0; display: flex; align-items: center; gap: var(--s2); margin-right: auto; text-decoration: none; color: var(--ink-2); }
.rail__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-3); border: 1px solid var(--rule-firm); color: var(--ink-3); }
.rail__youname { font: var(--t-sm)/1.2 var(--ui); }
.rail__youname i { margin-left: var(--s2); font: 500 var(--t-xs)/1 var(--ui); font-style: normal; color: var(--ink-3); border: 1px solid var(--rule-firm); padding: 2px 5px; }
.rail__you:hover { color: var(--ink); }
.rail__you:hover .rail__avatar { border-color: var(--ink-3); }

/* The top bar's account side (after 21st.dev). */
.topbar__you { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.topbar a.topbar__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s3); border: 1px solid var(--rule-firm); color: var(--ink-2); font: 500 var(--t-sm)/1 var(--ui); text-decoration: none; }
.topbar a.topbar__btn:hover { color: var(--ink); border-color: var(--ink-3); text-decoration: none; }
.topbar a.topbar__btn--icon { width: 32px; padding: 0; justify-content: center; }
.topbar a.topbar__cta { height: 32px; display: inline-flex; align-items: center; padding: 0 var(--s3); }

/* Every Aesthetic under the Aesthetics row (2026-09-26). The chevron sits at
   the row's right edge; the list scrolls inside the rail. */
.rail__withall { position: relative; }
.rail__withall > a { padding-right: 36px; }
.rail__all > summary { position: absolute; top: 0; right: calc(-1 * var(--s2)); width: 32px; height: 40px; display: grid; place-items: center; list-style: none; cursor: pointer; color: var(--ink-3); }
.rail__all > summary::-webkit-details-marker { display: none; }
.rail__all > summary:hover { color: var(--ink); }
.rail__all > summary svg { transition: transform 0.15s ease-out; }
.rail__all[open] > summary svg { transform: rotate(90deg); }
.rail__all ul { max-height: 34vh; overflow-y: auto; margin: 2px 0 var(--s2) calc(16px + var(--s3)); padding-right: var(--s1); border-inline-start: 1px solid var(--rule-firm); scrollbar-width: thin; }
.rail__all ul li + li { margin-top: 0; }
.rail__all ul a { min-height: 28px; margin-inline: 0; padding: 0 var(--s3); font: var(--t-sm)/1.2 var(--ui); color: var(--ink-3); }
.rail__all ul a:hover { color: var(--ink); background: none; }
.rail__all ul a[aria-current="page"] { color: var(--ink); background: none; box-shadow: inset 2px 0 0 var(--brand); }
@media (prefers-reduced-motion: reduce) { .rail__all > summary svg { transition: none; } }

/* The foot, tidied (2026-09-26): one baseline. A plain round avatar and
   "You · soon" on the left; the ? and theme as an identical pair of 32px
   squares on the right. */
.rail__foot { align-items: center; gap: var(--s2); }
.rail__avatar { width: 28px; height: 28px; border: 1px solid var(--rule-firm); border-style: solid; background: var(--paper-3); }
.rail__youname { font: var(--t-sm)/1 var(--ui); color: var(--ink-2); }
.rail__youname i { margin: 0; padding: 0; border: 0; font: var(--t-xs)/1 var(--ui); font-style: normal; color: var(--ink-3); }
.rail__help, .rail__foot .themeswitch { flex: none; }
.rail__help > summary, .rail__foot .themeswitch {
  box-sizing: border-box; width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: 0; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--rule-firm); border-radius: 0;
  background: transparent; color: var(--ink-2); font: 600 var(--t-sm)/1 var(--ui); opacity: 1;
}
.rail__help > summary:hover, .rail__help[open] > summary, .rail__foot .themeswitch:hover { color: var(--ink); border-color: var(--ink-3); opacity: 1; }
.rail__foot .themeswitch [data-theme-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rail__foot .themeswitch svg { width: 15px; height: 15px; }

/* The ? menu spans the rail's foot, so it never runs past the rail's edge
   (2026-09-26). Legal links sit on one line. */
.rail__foot { position: relative; }
.rail__help { position: static; }
.rail__helpmenu { left: 0; right: 0; width: auto; bottom: calc(100% + var(--s2)); }
.rail__helplegal a { display: inline; padding: 0; background: none; }

/* Feedback, centred in the foot (2026-09-26): ? | Feedback | theme. */
.rail__help { order: 1; }
.rail__feedback { order: 2; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s3); border: 1px solid var(--rule-firm); color: var(--ink-2); font: 500 var(--t-sm)/1 var(--ui); text-decoration: none; }
.rail__feedback:hover, .rail__feedback[aria-current="page"] { color: var(--ink); border-color: var(--ink-3); }
.rail__foot .themeswitch { order: 3; }
/* X and LinkedIn (2026-09-29): the house square, icons at the theme's 15px. */
/* The pair's wrapper steps aside, so ?, X, LinkedIn and theme are four equal
   squares spread evenly across the foot (founder, 2026-09-29). */
.rail__social { display: contents; }
.rail__soc { order: 2; }
.rail__soc { box-sizing: border-box; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--rule-firm); color: var(--ink-2); }
.rail__soc svg { width: 15px; height: 15px; fill: currentColor; }
.rail__soc:hover, .rail__soc:focus-visible { color: var(--ink); border-color: var(--ink-3); }

/* An empty top bar takes no room (2026-09-26). */
.topbar:not(:has(*)) { display: none; }
.topbar:not(:has(*)) + * { margin-top: calc(3rem + var(--s2)); }

/* THE RAIL IS FIXED (founder, 2026-09-26): it never scrolls with the page
   and always touches the top and bottom of the screen. The main column keeps
   its grid track beside it. Below 60rem the rail is a disclosure as before. */
/* The shell's rail shares its class with site.css's content rails, which add
   margin-block-end: var(--s8). Below 60rem that margin opened a white band
   under the header on every page (2026-09-26); the shell rail never takes it. */
.sideshell > .rail { margin-block-end: 0; }
@media (min-width: 60.0625rem) {
  .sideshell > .rail { position: fixed; top: 0; bottom: 0; left: 0; width: 15.5rem; height: 100vh; height: 100dvh; margin: 0; z-index: 20; }
  .sideshell > main { grid-column: 2; }
}

/* CULTURAL REVIEW (founder, 2026-09-29). The open ring after an Aesthetic's
   name: a status on that Aesthetic, never a group of its own. Ink-3, like
   the names themselves; violet stays for interaction (ruling 11). The key
   under the list names the ring once and leads to the open reviews. */
.cr-o {
  display: inline-block; flex: none; box-sizing: border-box;
  width: 0.5rem; height: 0.5rem; border: 1.5px solid currentColor; border-radius: 50%;
  vertical-align: 0.05em; color: var(--ink-3);
}
.rail__all ul a .cr-o { margin-inline-start: 6px; }
.rail__crkey { margin: 0 0 var(--s2) calc(16px + var(--s3)); }
.rail__crkey a {
  display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--s3);
  font: var(--t-xs)/1.2 var(--ui); color: var(--ink-3); text-decoration: none;
}
.rail__crkey a:hover, .rail__crkey a[aria-current="page"] { color: var(--ink); }
.rail__crkey b { margin-inline-start: auto; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Product updates, one row above the foot (2026-09-29). The form opens above
   the row, over the rail like the ? menu, so it never pushes the foot away. */
.rail__updates { position: relative; margin-top: auto; }
.rail__updates > summary { display: flex; align-items: center; gap: var(--s3); min-height: 40px; margin-inline: calc(-1 * var(--s2)); padding: 0 var(--s2); list-style: none; cursor: pointer; font: var(--t-base)/1.2 var(--ui); color: var(--ink-2); }
.rail__updates > summary::-webkit-details-marker { display: none; }
.rail__updates > summary:hover, .rail__updates[open] > summary { color: var(--ink); background: var(--paper-3); }
.rail__updates .subscribe__row { flex-direction: column; }
.rail__updates .subscribe__input { flex: none; width: 100%; border-right: 1px solid var(--rule-firm); border-bottom: 0; }
.rail__updates .subscribe { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--s2)); z-index: 5; padding: var(--s3); background: var(--paper-deep); border: 1px solid var(--rule-firm); }

/* THE FOOT IS PINNED (founder, 2026-09-29). On desktop the rail never scrolls
   as a whole: the top (wordmark, search) and the foot (updates, ?, X,
   LinkedIn, theme) stay put, flush with the top and bottom of the screen,
   and only the navigation between them scrolls. */
@media (min-width: 60.0625rem) {
  .sideshell > .rail { display: flex; flex-direction: column; overflow: hidden; }
  .sideshell > .rail > .rail__top { flex: none; }
  .sideshell > .rail > .rail__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .sideshell > .rail .rail__search, .sideshell > .rail .rail__updates, .sideshell > .rail .rail__foot { flex: none; }
  /* The links bleed var(--s2) either side for their hover fill; the scroller
     is widened by the same amount so that bleed never makes it scroll sideways. */
  .sideshell > .rail .rail__nav { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-inline: calc(-1 * var(--s2)); padding-inline: var(--s2); }
  .sideshell > .rail .rail__updates { margin-top: 0; }
}
/* Visually hidden labels (", in cultural review") are absolutely positioned.
   Without a positioned ancestor they escaped the Aesthetics list and stretched
   the rail's scroll area about 1,200px past its last item. The list holds them. */
.rail__nav ul { position: relative; }