/* The few lines React + Motion need on top of the live stylesheets. Nothing here changes how anything looks at rest:
   it hands the rail's width and the highlight to Motion (springs instead of the CSS transitions) and no more. */
@media (min-width: 961px) {
  .rail { transition: box-shadow .2s; }                         /* width: Motion's spring */
  .rail-item, .rail-back, .rail-me { transition: background var(--ease), color var(--ease); }
}
.rail-item { position: relative; }
.rail-item.on { background: transparent; }                       /* the highlight is the gliding pill below */
.rail-item.on::before { display: none; }
.rail-item > .rail-pill { position: absolute; inset: 0; border-radius: var(--rounded-sm); background: rgba(255,255,255,.07); opacity: 1 !important; transition: none !important; pointer-events: none; }
.rail-item > .rail-pill::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--primary-on-dark, #42C79A); }
.rail-item > .rail-ic { display: contents; }
.rail-item > * { position: relative; z-index: 1; }
.rail-item > .rail-pill { z-index: 0; }
.rail-item { cursor: pointer; background: none; border: 0; width: 100%; text-align: left; font: inherit; }
.rail-item.hidden { display: none; }

/* the page roots the scoped sheets hang from */
.dl-scope, .pp-scope { display: contents; }

/* the live sheet is class="grid", which Tailwind's own `grid` utility would turn into a CSS grid: it is a table */
.pp-scope table.grid { display: table; }
@media (max-width: 760px) { .pp-scope table.grid { display: block; } }