/* The rail (3 Oct 2026): the product's places, on every page. Markup and behaviour are js/rail.js. Moved here from
 * css/console.css when the older pages took the rail on. The console's rail sits in its own grid; everywhere else
 * it is .rail-fixed, pinned to the left edge, and the page steps aside for it (body.has-rail). The colours are the
 * console's tokens; a page without them gets the dark set below (.rail-dark), which is those tokens' dark values. */
.rail { background: var(--color-canvas-default); border-right: 1px solid var(--color-border-default); display: flex; flex-direction: column; align-items: stretch; padding: 8px 6px; gap: 2px; }
.rail-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px; border-radius: 8px; color: var(--color-fg-muted); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; width: 100%; }
.rail-item:hover { background: var(--color-canvas-subtle); color: var(--color-fg-default); text-decoration: none; }
.rail-item[aria-current=page] { color: var(--color-accent-fg); background: var(--color-accent-subtle); }
.rail-item .ri { font-size: 18px; line-height: 1; }
.rail-item .rl { font-size: 10.5px; letter-spacing: .01em; }
.rail-item .rb { position: absolute; top: 4px; right: 8px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; background: var(--color-neutral-muted); color: var(--color-fg-muted); }
.rail-item .rb:empty { display: none; }
.rail-item .rb.pend:not(:empty) { background: var(--x-magenta); color: #fff; }
.rail-item .rb.todo:not(:empty) { background: var(--x-red); color: #fff; }
.rail-item .ri svg { width: 18px; height: 18px; display: block; }
.rail-more > summary { list-style: none; } .rail-more > summary::-webkit-details-marker { display: none; }
.rail-more { position: relative; }
.rail-menu { position: absolute; left: 100%; top: 0; margin-left: 6px; min-width: 160px; background: var(--color-canvas-overlay, var(--color-canvas-default)); border: 1px solid var(--color-border-default); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; z-index: 5; display: flex; flex-direction: column; }
.rail-menu a { padding: 7px 10px; border-radius: 6px; color: var(--color-fg-default); font-size: 13.5px; text-decoration: none; }
.rail-menu a.narrow-only { display: none; }   /* a place the phone's bottom bar has no room for */
.rail-menu a:hover { background: var(--color-canvas-subtle); }
.rail-menu-h { padding: 8px 10px 2px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-fg-muted); }
.rail-menu-h:first-child { padding-top: 4px; }
/* More's menu is centred on its item: hung from the item's top it ran off the bottom of a short window and cut Help off */
.rail-more > .rail-menu { top: 50%; transform: translateY(-50%); max-height: calc(100vh - 16px); overflow-y: auto; }
.rail-gap { margin-top: auto; }
/* the mode square */
.rail-mode { position: relative; margin: 0 0 8px; }
.rail-mode > summary { list-style: none; cursor: pointer; } .rail-mode > summary::-webkit-details-marker { display: none; }
.rail-sq { display: grid; place-items: center; width: 40px; height: 40px; margin: 2px auto 0; border-radius: 10px; background: var(--x-logo-box); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.rail-sq:hover { filter: brightness(1.15); }
.rail-mode .rail-menu { top: 0; min-width: 240px; }
.rail-mode .rail-menu a { display: flex; flex-direction: column; gap: 1px; }
.rail-mode .rail-menu a span { font-size: 12px; color: var(--color-fg-muted); }
.rail-mode .rail-menu a[aria-current=page] { background: var(--color-accent-subtle); }

/* on a page that is not the console */
.rail-fixed { position: fixed; top: 0; bottom: 0; left: 0; width: 68px; box-sizing: border-box; z-index: 30000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; }
.rail-fixed .rail-menu { z-index: 30001; }
body.has-rail { padding-left: 68px; box-sizing: border-box; }
.rail-dark { --color-canvas-default: #161b22; --color-canvas-subtle: #0d1117; --color-canvas-overlay: #161b22; --color-border-default: #30363d;
  --color-fg-default: #e6e9f0; --color-fg-muted: #8b949e; --color-accent-fg: #3fb77f; --color-accent-subtle: #12351f; --color-neutral-muted: #30363d;
  --x-logo-box: #0d1117; --x-magenta: #d78cf0; }
.rail-dark .rail-sq { border: 1px solid #30363d; }

@media (max-width: 860px) {
  /* THE RAIL BECOMES A BOTTOM BAR (3 Oct 2026, Sean's phone screenshot: "first pass is a mess" — the rail stacked
   * full-width above the page, because the rule here still hid the old .SideNav). Plates · Desk · Wall · Admin, then More and Me, in a row,
   * fixed to the bottom as Slack and GitHub do on a phone. The mode square, Theme and History leave the bar; More opens upward. */
  :root { --x-bottom-bar: calc(56px + env(safe-area-inset-bottom)); }   /* the bar's height, for panels that must stop above it */
  .rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; flex-direction: row; align-items: stretch; justify-content: space-around; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--color-border-default); }
  .rail .rail-mode, .rail .rail-gap, .rail #mode, .rail [data-place=history], .rail [data-place=org] { display: none; }
  .rail-item { flex: 1 1 0; width: auto; padding: 6px 2px 4px; }
  .rail-menu a.narrow-only { display: block; }
  .rail-more { flex: 1 1 0; display: flex; }
  .rail-more > summary { flex: 1; }
  .rail-menu, .rail-more > .rail-menu { left: auto; right: 6px; top: auto; bottom: calc(100% + 6px); margin-left: 0; max-height: 70vh; overflow-y: auto; transform: none; }
  .rail-item .rb { right: calc(50% - 22px); }
  body.has-rail { padding-left: 0; padding-bottom: var(--x-bottom-bar); }
  .rail-fixed { top: auto; width: auto; }
}