/* 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 12px; color: #fff; font-size: 13px; }
.staff .nav a, .nav summary { color: inherit; text-decoration: none; padding: 6px 8px; border-radius: 5px; display: flex; align-items: center; gap: 9px; }
.staff .nav a:hover, .nav summary:hover { background: rgba(255,255,255,.07); }
.staff .nav a.on { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; }
.nav .icon { width: 16px; height: 16px; flex: none; opacity: .75; }
.nav a.on .icon { opacity: 1; }
.nav .label { flex: 1; }
.nav .count { font-family: var(--mono); font-size: 10.5px; background: rgba(255,255,255,.14); color: #fff; border-radius: 9px; padding: 1px 7px; }
.nav .group { padding: 14px 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: 10px 6px 6px; }
/* Chat: the one door out of the app, set apart at the top; it opens its own tab. */
.staff .nav a.chat { background: var(--flag); color: #fff; font-weight: 600; margin: 0 0 4px; padding: 8px 10px; }
.staff .nav a.chat:hover { background: var(--flag-ink); }
.nav a.chat .icon { opacity: 1; }
/* Setup and Admin: folded, with a turning marker. */
.nav summary { cursor: pointer; list-style: none; font-weight: 600; opacity: .85; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: "›" / ""; transition: transform .15s; opacity: .6; }
.nav details[open] > summary::after { transform: rotate(90deg); }
.staff .nav details > a { padding-left: 24px; }
.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 details { display: flex; align-items: center; }
  .nav summary, .staff .nav details > a { white-space: nowrap; padding-left: 8px; }
  .staff .nav a.chat { margin: 0 6px 0 0; }
  .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); }