/* porch's rail on every page outside the app (rail.html): the app's sidebar
   as the same floating tile, in the viewer's theme (themes.css), wherever
   they are. On a big screen a narrow rail that opens on hover; on a phone a
   floating bar along the bottom with the places you go most. Flat: the
   theme's own tile shape and edge, no glass, no shadow. */
.nrail{position:fixed;z-index:60;display:flex;font-family:var(--brand-font);font-size:14px;color:var(--s-ink);background:var(--side);
  box-shadow:inset 0 0 0 var(--tile-lw) var(--tile-line);-webkit-font-smoothing:antialiased;line-height:1.2;box-sizing:border-box}
.nrail *{box-sizing:border-box}
.nrail a{color:inherit;text-decoration:none}
.nrail .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nr-i{display:flex;align-items:center;gap:14px;font-weight:600;letter-spacing:-.1px;border-radius:min(var(--tile-r),12px);white-space:nowrap;color:var(--s-ink2)}
.nr-i>span:not(.bdg){overflow:hidden;text-overflow:ellipsis}
.nr-i:hover{background:var(--s-hover);color:var(--s-ink)}
.nr-i.on{background:var(--s-on);color:var(--s-ink)}
.nr-i .bdg{flex:none}
.nr-brand{color:var(--s-ink);--light:#ff8a1c}
.nr-brand .logo{display:block;width:auto}
@media (min-width:900px){
  body:has(>.nrail){padding-left:94px}
  .nrail{left:14px;top:14px;bottom:14px;width:68px;flex-direction:column;gap:4px;padding:18px 10px 12px;overflow:hidden;
    border-radius:var(--rail-top) var(--rail-top) var(--tile-r) var(--tile-r);transition:width .22s cubic-bezier(.2,.7,.3,1)}
  .nrail:hover,.nrail:focus-within{width:232px}
  .nr-brand{display:flex;align-items:center;height:40px;margin:0 0 14px 9px}
  .nr-brand .logo{height:26px}
  .nr-brand .nr-word{display:none}
  .nrail:hover .nr-brand .nr-mark,.nrail:focus-within .nr-brand .nr-mark{display:none}
  .nrail:hover .nr-brand .nr-word,.nrail:focus-within .nr-brand .nr-word{display:block}
  .nr-i{height:44px;padding:0 14px}
  .nr-i>span:not(.bdg){opacity:0;transition:opacity .15s}
  .nrail:hover .nr-i>span,.nrail:focus-within .nr-i>span{opacity:1}
  .nr-sp{flex:1}
  .nr-me{padding-left:14px}
}
@media (max-width:899px){
  body:has(>.nrail){padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .nrail{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:62px;padding:0 4px;justify-content:space-around;align-items:stretch;
    border-radius:min(calc(var(--tile-r) + 4px),22px)}
  .nr-brand,.nr-sp,.nr-x{display:none}
  .nr-i{flex:1;flex-direction:column;justify-content:center;gap:4px;margin:6px 0;font-size:10.5px;min-width:0}
  .nr-i.on{background:none;color:var(--s-ink)}
  .nr-i:hover{background:none}
  .nr-i>span:not(.bdg){max-width:100%}
  .nr-me .bdg{width:18px!important;height:25px!important}
  /* rail.js slides it away while you scroll down a page, like Safari's toolbar */
  .nrail{transition:transform .32s cubic-bezier(.2,.7,.3,1)}
  .nrail.away{transform:translateY(calc(100% + 14px + env(safe-area-inset-bottom)));pointer-events:none}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){.nrail{transition:none}}