/* Navigation rail, top bar and phone tab bar. */
/* ── Shell ── */
.rail { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-w); background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; z-index: 40;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 0 calc(env(safe-area-inset-bottom, 0px) + 16px) env(safe-area-inset-left, 0px); }
.brand { padding: 0 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand b { display: block; font-family: var(--f-display); font-size: 1.45rem; letter-spacing: .03em; color: #fff; line-height: 1.05; }
.brand span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.nav { display: flex; flex-direction: column; padding: 12px 0; gap: 2px; }
.nav button { background: none; border: 0; text-align: left; padding: 10px 20px; color: var(--rail-ink); font-weight: 500; border-left: 3px solid transparent; display: flex; justify-content: space-between; align-items: center; }
.nav button:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav button.on { color: #fff; border-left-color: var(--brass); background: rgba(255,255,255,.07); }
.nav .count { font-family: var(--f-mono); font-size: .72rem; opacity: .7; }
.rail-foot { margin-top: auto; padding: 14px 20px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .8rem; }
.rail-foot .who { color: #fff; font-weight: 600; }
.rail-foot .role { color: var(--brass); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }

.topbar { display: none; }
.tabs { display: none; }
main { margin-left: var(--rail-w); padding-block: 28px 64px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

@media (max-width: 860px) {
  .rail { display: none; }
  main { margin-left: 0; padding-block: 16px 96px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .topbar { display: flex; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--rail); color: #fff; align-items: center; gap: 12px;
    padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .topbar b { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: .03em; line-height: 1; }
  .topbar small { display: block; color: var(--brass); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
  .topbar .gear { margin-left: auto; background: rgba(255,255,255,.08); border: 0; color: #fff; border-radius: 6px; padding: 6px 10px; font-size: .8rem; font-weight: 600; }
  .tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--rail);
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  .tabs button { background: none; border: 0; color: var(--rail-ink); font-size: .72rem; font-weight: 600; padding: 8px 2px; border-radius: 6px; letter-spacing: .02em; }
  .tabs button.on { color: #fff; background: rgba(255,255,255,.09); box-shadow: inset 0 -2px 0 var(--brass); }
}