/* 1100px and under (the phone layer, 3 October 2026): the Features page's Contents pill and its sheet, moved out of
   world-features.css. That file is back to its original text, the sticky Contents bar of 1 October; this one is linked
   with media="(max-width:1100px)" immediately after it and turns the bar into the pill (3 October 2026, owner: "like the
   legal pages' Contents pill"). With the script, the rail's button is a dark pill docked bottom centre, between the Pause
   pill (bottom left) and back-to-top (bottom right), above the home bar: the group in view (number and name) and a gold
   hairline for the reader's place in the 39 features, with the legal pill's box, type and motion (world-legal-compact.css):
   44px tall, one line, the name ellipsed. features.js shows it once the first group reaches the reading line and hides it
   before the footer; it opens the rail's panel, moved into a modal <dialog>, as a bottom sheet with the legal sheet's
   size, scrim and motion. Where the bar set a property the pill does not, this file sets it back to the value it has
   without the bar ("the bar, undone"). Nothing after the bar's block in world-features.css touches these elements. */
@media (max-width:1100px){
 /* The pill's box; the bar's own two variables, read only by the bar's rules, are unset (the bar, undone). */
 .fd-page{--fd-cx-b:14px;--fd-cx-h:44px;--fd-cx-side:110px;--fd-bar-r:initial;--fd-pill-room:initial}
 /* With the script: the rail keeps only the pill (fixed), so it takes no room; the groups start under the band, and the
    page's end clears the pill (its last lines can always be read above it). The bar's sticky place, undone. */
 html.fd-js .fd-page .fd-rail{position:static;height:auto;margin:0;top:var(--fd-t);z-index:auto;width:auto;max-width:none}
 html.fd-js .fd-page .fd-rail > .fd-rail-panel{display:none}
 html.fd-js .fd-page .fd-layout{padding-top:24px;padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
 html.fd-js .fd-page .fd-contents{
  position:fixed;left:50%;bottom:calc(var(--fd-cx-b) + env(safe-area-inset-bottom,0px));z-index:41;
  display:flex;align-items:center;gap:8px;box-sizing:border-box;width:min(360px,calc(100vw - 2 * var(--fd-cx-side)));height:var(--fd-cx-h);
  margin:0;padding:0 12px 0 8px;border:0;border-radius:14px;overflow:hidden;
  background:var(--fd-ink);color:#f6f3ec;box-shadow:0 12px 28px -10px rgba(28,27,31,.45);font:inherit;text-align:left;cursor:pointer;
  opacity:0;visibility:hidden;transform:translate(-50%,10px);
  transition:opacity .2s,transform .25s var(--fd-ease),visibility 0s linear .25s;
  max-width:none;
 }
 html.fd-js .fd-page .fd-contents.is-shown{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .25s var(--fd-ease),visibility 0s}
 html.fd-js .fd-page .fd-contents:focus-visible{outline:2px solid #ffd700;outline-offset:3px}
 html.fd-js .fd-page .fd-contents-icon{display:none;flex:0 1 auto;color:inherit}
 html.fd-js .fd-page .fd-contents-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 html.fd-js .fd-page .fd-contents-num{
  flex:0 0 auto;min-width:22px;box-sizing:border-box;padding:2px 6px;border-radius:999px;background:var(--fd-gold);color:var(--fd-ink);
  font-size:12px;line-height:1.35;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;
 }
 html.fd-js .fd-page .fd-contents-now{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
 html.fd-js .fd-page .fd-contents-chev{flex:0 0 auto;color:rgba(246,243,236,.7);margin-left:0;transition:all 0s ease 0s}
 html.fd-js .fd-page .fd-contents[aria-expanded="true"] .fd-contents-chev{transform:none}
 /* The reader's place: a 2px track along the foot of the pill, filled in gold (features.js sets --fd-p on the rail). */
 html.fd-js .fd-page .fd-contents-progress{position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:rgba(246,243,236,.14);overflow:hidden}
 html.fd-js .fd-page .fd-contents-progress::after{
  content:"";position:absolute;inset:0;background:var(--fd-gold);transform-origin:left;transform:scaleX(var(--fd-p,0));
  transition:transform .3s var(--fd-ease);
 }
 /* The bar's index under it, undone: the panel lives in the sheet, its list scrolls there. */
 html.fd-js .fd-page .fd-rail.is-open::before{content:none}
 html.fd-js .fd-page .fd-rail-panel{display:flex;position:static;left:auto;top:auto;width:auto;height:100%;max-height:none;box-shadow:inset 0 0 0 1px var(--fd-hair)}
 html.fd-js .fd-page .fd-rail-groups{overflow-y:visible;-webkit-mask-image:none;mask-image:none}
}
/* The sheet: the rail's panel in a modal dialog rising from the bottom edge, at the legal sheet's size (never more than
   80% of the window or 680px, so the header and the scrim stay in view above it); the list scrolls inside it. */
.fd-page .fd-sheet{
 position:fixed;inset:auto 0 0;box-sizing:border-box;width:min(560px,100%);max-width:100%;max-height:min(80svh,680px);
 margin:0 auto;padding:0;border:0;border-radius:20px 20px 0 0;background:#fffbf2;color:var(--fd-ink);
 box-shadow:0 -18px 50px rgba(28,27,31,.28);overflow:hidden;
}
.fd-page .fd-sheet[open]{display:flex;flex-direction:column}
.fd-page .fd-sheet::backdrop{background:rgba(28,27,31,.34)}
html.fd-sheet-open{overflow:hidden}
.fd-page .fd-sheet-inner{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.fd-page .fd-sheet-grip{position:absolute;left:50%;top:7px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(28,27,31,.18)}
.fd-page .fd-sheet-close{position:absolute;top:16px;right:10px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--fd-ink)}
.fd-page .fd-sheet-close:focus-visible{outline:2px solid var(--fd-ink);outline-offset:-2px}
html.fd-js .fd-page .fd-sheet .fd-rail-panel{
 display:flex;flex-direction:column;flex:1 1 auto;min-height:0;position:static;width:auto;height:auto;max-height:none;
 padding:0;border-radius:0;background:transparent;box-shadow:none;
}
/* The sheet's head row: the panel's own title ("Browse all features"), as the legal sheet's "Contents", beside the close. */
.fd-page .fd-sheet .fd-rail-title{flex:0 0 auto;margin:0;padding:16px 64px 6px 22px;line-height:44px;color:#45473f;border-bottom:1px solid #e3decf}
.fd-page .fd-sheet .fd-all-toggle{flex:0 0 auto;min-height:44px;margin:10px 18px 0;padding:6px 14px 6px 12px;background:rgba(28,27,31,.06);font-size:14px}
.fd-page .fd-sheet .fd-all-toggle:focus-visible{outline-color:var(--fd-ink);outline-offset:1px}
html.fd-js .fd-page .fd-sheet .fd-rail-groups{flex:1 1 auto;min-height:0;padding:8px 10px 14px 12px;overflow-y:auto;overscroll-behavior:contain}
.fd-page .fd-sheet .fd-rail-features a{min-height:44px;box-sizing:border-box;align-content:center;font-size:14px}
.fd-page .fd-sheet .fd-rail-fnum{font-size:12px}
.fd-page .fd-sheet .fd-rail-demo{flex:0 0 auto;align-self:stretch;box-sizing:border-box;min-height:48px;margin:6px 18px calc(14px + env(safe-area-inset-bottom,0px))}
@media (hover:hover){
 .fd-page .fd-sheet .fd-all-toggle:hover{background:rgba(255,214,78,.35)}
 .fd-page .fd-sheet-close:hover{background:rgba(28,27,31,.05)}
}
/* It slides up and back down; under reduced motion it simply appears and goes (no slide, no fade). */
@media (prefers-reduced-motion:no-preference){
 .fd-page .fd-sheet{transform:translateY(100%);transition:transform .34s var(--fd-ease),overlay .34s allow-discrete,display .34s allow-discrete}
 .fd-page .fd-sheet[open]{transform:none}
 .fd-page .fd-sheet::backdrop{opacity:0;transition:opacity .34s,overlay .34s allow-discrete,display .34s allow-discrete}
 .fd-page .fd-sheet[open]::backdrop{opacity:1}
 @starting-style{
  .fd-page .fd-sheet[open]{transform:translateY(100%)}
  .fd-page .fd-sheet[open]::backdrop{opacity:0}
 }
}
/* While the sheet is open, the Pause pill and back-to-top step aside (under the scrim they would sit on its foot). Faded
   and click-through, as the chrome hides them elsewhere; focus still brings them back. */
@media (max-width:1100px){
 html.fd-sheet-open .fd-page .world-controls:not(:focus-within),
 html.fd-sheet-open .fd-page .world-back-top:not(:focus){opacity:0;transform:translateY(12px);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
 html.fd-js .fd-page .fd-contents,html.fd-js .fd-page .fd-contents.is-shown,html.fd-js .fd-page .fd-contents-progress::after{transition:none}
 html.fd-js .fd-page .fd-contents{transform:translate(-50%,0)}
 html.fd-js .fd-page .fd-contents-chev{transition:none}
}
@media print{.fd-page .fd-contents,.fd-page .fd-sheet{display:none!important}}
/* A landscape tablet below 1101px still pins (a column of 880px or more, 520px tall or more): the pinned group then starts
   under the Menu pill and ends above the Contents pill, and its stage gives up both. */
@media (max-width:1100px){
 @container fdg (min-width:880px){
  html.fd-focus .fd-page .fd-group.is-pinned{
   --fd-cx-room:calc(var(--fd-cx-b) + var(--fd-cx-h) + 10px + env(safe-area-inset-bottom,0px));
   top:calc(var(--fd-bar-top) + var(--fd-bar-h) + 10px);max-height:calc(100svh - var(--fd-bar-top) - var(--fd-bar-h) - 10px - var(--fd-cx-room));
   --stage-h:min(calc(var(--stage-w) / 2),calc(100svh - var(--fd-bar-top) - var(--fd-bar-h) - 10px - var(--fd-cx-room) - 345px));
  }
 }
}