/* WDT OS shell: the one nav on every signed-in page, inventory and marketing alike. Self-contained
   (own colours and font) because each module's stylesheet names its colours differently. */
@font-face { font-family: "Big Shoulders"; src: url(fonts/BigShoulders-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
.os-nav { --os-text: #F2F2F2; --os-muted: #B8B5CC; --os-dim: #6E6C7A; --os-hair: rgba(255, 255, 255, .13); --os-gold: #F2C014;
          display: flex; align-items: center; gap: 24px; padding: 10px 24px; border-bottom: 1px solid var(--os-hair);
          background: #0B0B0B; font-family: "Big Shoulders", "Arial Narrow", sans-serif; line-height: 1.35; }
.os-brand { display: flex; align-items: center; gap: 10px; color: var(--os-text); text-decoration: none; font-weight: 700;
            font-size: 18px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.os-brand img { height: 30px; width: auto; }
.os-links { display: flex; gap: 22px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.os-links::-webkit-scrollbar { display: none; }
.os-link { text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 14px;
           color: var(--os-dim); padding: 8px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.os-link:hover { color: var(--os-muted); }
.os-link.os-on { color: var(--os-text); border-bottom-color: var(--os-gold); }
.os-who { display: flex; align-items: center; gap: 12px; color: var(--os-muted); font-size: 15px; white-space: nowrap; margin: 0; }
.os-who .btn-text { background: none; border: 0; color: var(--os-muted); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 700px) {
  .os-nav { flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; }
  .os-who { margin-left: auto; }
  .os-links { order: 3; flex-basis: 100%; }
}