/* shell.css: left rail navigation and page shell. Raster tokens only.
   At 1024 px and wider: rail column + content. Below: one row that scrolls sideways. */

.shell { display: block; }
.shell--bare { display: block; }

.rail { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); box-sizing: border-box; margin: 0; padding: var(--space-2) var(--space-3); overflow-x: auto; border-bottom: var(--stroke-hair) solid var(--rule); background: var(--paper); }
.rail > * { flex: 0 0 auto; }
.rail__group { display: flex; flex-direction: row; gap: var(--space-1); }
.rail__group form { margin: 0; }
.rail__mark { color: var(--ink); text-decoration: none; }
.rail__link { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: 44px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-1); background: transparent; color: var(--ink-2); font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rail__link:hover { color: var(--ink); background: var(--paper-2); }
.rail__link[aria-current="page"] { color: var(--ink); background: var(--paper-2); text-decoration: underline; text-decoration-thickness: var(--stroke-hair); text-underline-offset: var(--space-1); }
.rail__link:focus-visible { outline: var(--stroke-rule) solid var(--ink); outline-offset: 2px; }
.rail__new { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.rail__icon { flex: 0 0 auto; }

/* Beat the .nav rules of layout.css (wrap, column at 640 px): the rail stays one row that scrolls. */
.rail.nav { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-3); margin-top: 0; }
.rail__group { flex-wrap: nowrap; }

@media (min-width: 1024px) {
  .shell:not(.shell--bare) { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
  .rail.nav { flex-direction: column; align-items: stretch; }
  .rail { position: sticky; top: 0; flex-direction: column; align-items: stretch; gap: var(--space-3); height: 100vh; padding: var(--space-4) var(--space-3); overflow-x: visible; overflow-y: auto; border-right: var(--stroke-hair) solid var(--rule); border-bottom: 0; }
  .rail__group { flex-direction: column; }
  .rail__group--end { margin-top: auto; }
  .rail__link { width: 100%; min-height: 36px; }
  .rail__new { justify-content: flex-start; }
}