/* --- Shell: off-canvas drawer on mobile, fixed rail on desktop ---------- */
.shell { min-height: 100vh; }

.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 200;
  width: min(var(--rail-w), 84vw);
  background: var(--rail-bg); color: var(--rail-text);
  padding: var(--s-5) 0 calc(var(--s-7) + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform var(--dur-panel) var(--ease-out), box-shadow var(--dur-panel) var(--ease-out);
}
/* The shadow belongs to the open drawer only. --shadow-drawer has no offset, so
   it radiates every way from the box; parked at translateX(-100%) the drawer's
   right edge sits on x: 0 and half that blur bleeds back across the left of the
   screen, which is the smudge you see with the menu shut. */
.rail.is-open { transform: translateX(0); box-shadow: var(--shadow-drawer); }

.rail-backdrop {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(14, 31, 27, .5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-panel) ease, visibility var(--dur-panel);
}
.rail-backdrop.is-open { opacity: 1; visibility: visible; }

.rail__brand { display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-6) var(--s-5); border-bottom: 1px solid var(--rail-rule); margin-bottom: var(--s-5); }
.rail__logo { flex: none; width: 50px; height: 50px; padding: 3px; border-radius: var(--r-pill); background: var(--c-cream); }
.rail__brand div { flex: 1; min-width: 0; }
.rail__brand b { display: block; font-size: var(--t-17); font-weight: 700; color: var(--c-cream); letter-spacing: -.015em; }
.rail__close { color: var(--rail-text); }
@media (hover: hover) { .rail__close:hover { background: var(--rail-hover); color: var(--c-cream); } }
.rail__close:active { background: var(--rail-active); color: var(--c-cream); }

.rail__group { padding: 0 var(--s-5); margin-bottom: var(--s-6); }
.rail__label { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rail-text-dim); padding: 0 var(--s-3) var(--s-3); }
.rail a {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  color: var(--rail-text); text-decoration: none;
  font-size: var(--t-13); font-weight: 600;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.rail a .ico { flex: none; opacity: .6; transition: opacity var(--dur-fast); }
@media (hover: hover) {
  .rail a:hover { background: var(--rail-hover); color: var(--c-cream); }
  .rail a:hover .ico { opacity: 1; }
}
.rail a:active { background: var(--rail-active); color: var(--c-cream); }
.rail a:active .ico { opacity: 1; }
.rail a[aria-current="page"] { background: var(--rail-active); color: var(--rail-active-fg); }
.rail a[aria-current="page"] .ico { opacity: 1; }
.rail a .count {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-sm);
  font: 700 10px/1 var(--font-ui); letter-spacing: .02em;
  background: rgba(137, 215, 183, .14); color: var(--rail-text);
}
@media (hover: hover) {
  .rail a:hover .count { background: rgba(137, 215, 183, .22); color: var(--c-cream); }
}
.rail a[aria-current="page"] .count { background: rgba(137, 215, 183, .24); color: var(--rail-active-fg); }
.rail a .count--alert,
.rail a:hover .count--alert,
.rail a[aria-current="page"] .count--alert { background: var(--c-mint); color: var(--c-forest); }

@media (min-width: 1024px) {
  /* minmax(0,1fr), not 1fr: an auto-minimum track grows to its content's
     min-content width, so one wide table would push the whole page sideways
     instead of scrolling inside its own box. */
  .shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  /* The content column is a flex column so <main> can be handed the height the
     topbar does not use. `flex: 1 1 auto` and not `1 1 0`: a basis of zero would
     let a page taller than the window collapse the column to the topbar alone.
     This is what lets a list fill the screen instead of stopping at a fixed
     figure — see .tablewrap in _table.css. */
  .shell__main { display: flex; flex-direction: column; }
  .shell__main > main { flex: 1 1 auto; }
  /* .is-open can still be on the element if the window was widened with the
     drawer out, and it outranks a plain .rail — so it has to be named here. */
  .rail,
  .rail.is-open { position: sticky; top: 0; height: 100vh; width: auto; transform: none; box-shadow: none; transition: none; }
  .rail-backdrop { display: none; }
}