/* Navigation: the office sidebar (a strip across the top on a phone), tabs, and the
   crew view's bar with the office's preview switcher. */

.nav { background: var(--oak); color: #DCE4DA; padding: 16px 10px; display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav .brand { padding: 0 8px 16px; color: #fff; font-size: 13px; }
.staff .nav a { color: inherit; text-decoration: none; padding: 6px 8px; border-radius: 5px; display: flex; justify-content: space-between; gap: 8px; }
.staff .nav a:hover { background: rgba(255,255,255,.07); }
.staff .nav a.on { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; }
.nav a span { font-family: var(--mono); font-size: 10.5px; opacity: .7; }
.nav .group { padding: 10px 8px 4px; font-family: var(--display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-2xs); opacity: .6; }
.nav .sep { height: 1px; background: rgba(255,255,255,.14); margin: 8px 6px; }
.nav .me { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; }
.nav .me button { background: none; border: 0; color: inherit; opacity: .7; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

@media (max-width: 900px) {
  .nav { flex-direction: row; overflow-x: auto; align-items: center; position: static; height: auto; padding: 8px; }
  .nav .brand, .nav .sep, .nav .group, .nav .me .email { display: none; }
  .nav .me { margin: 0; padding: 0 8px; border: 0; white-space: nowrap; }
  .nav a { white-space: nowrap; }
}

.tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--line); margin-bottom: var(--space-xl); overflow-x: auto; }
.staff .tabs a { padding: 7px 11px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1.5px; white-space: nowrap; text-decoration: none; }
.staff .tabs a.on { color: var(--ink); border-color: var(--flag); }
.tabs .mono { font-size: var(--text-2xs); font-weight: 400; }

/* The crew bar */
.crew-top { background: var(--oak); color: #fff; display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: sticky; top: 0; z-index: 2; }
.staff .crew-top a, .crew-top .out { color: #fff; text-decoration: none; }
.crew-top .brand { font-size: 17px; }
.crew-top .who { flex: 1; font-size: var(--text-m); opacity: .8; }
.crew-top form { margin: 0; }
.crew-top a.out { display: inline-flex; align-items: center; }
.crew-top .out { background: none; border: 1px solid rgba(255,255,255,.4); border-radius: var(--r); padding: 5px 10px; font: 500 14px var(--body); cursor: pointer; min-height: 44px; }
.crewv .preview { background: var(--hold-wash); color: var(--hold); font-size: var(--text-s); padding: 6px 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.staff .preview a { color: var(--hold); }
.staff .preview a.on { font-weight: 700; color: var(--ink); }