/* Compact workspace switcher. The mobile app keeps its own Apple-style header. */
@media (min-width: 768px) {
  .topbar {
    grid-template-columns: auto auto minmax(180px, 1fr) auto auto auto auto !important;
    gap: 9px !important;
    min-height: 68px !important;
    padding: 9px 16px !important;
    overflow: visible !important;
  }

  .brand { min-width: 132px !important; }
  .topbarLockup > img { width: 39px !important; height: 39px !important; }
  .topbarLockup b { font-size: 14px !important; }

  .workspaceSwitcher { position: relative; z-index: 4; }
  .workspaceMenuToggle {
    display: grid;
    grid-template-columns: 34px minmax(78px, 1fr) 14px;
    align-items: center;
    gap: 9px;
    width: 178px;
    min-height: 48px;
    padding: 5px 10px 5px 6px;
    border: 1px solid #e2e3e7;
    border-radius: 14px;
    color: #18181b;
    background: #f7f7f8;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .workspaceMenuToggle:hover,
  .workspaceSwitcher.open .workspaceMenuToggle {
    border-color: rgba(232, 23, 23, .34);
    background: #fff;
    box-shadow: 0 8px 25px rgba(17, 17, 19, .07);
  }
  .workspaceMenuToggle:active { transform: scale(.985); }
  .workspaceMenuGlyph {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(2, 7px);
    place-content: center;
    gap: 3px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
    background: #ed1717;
    box-shadow: 0 7px 17px rgba(237, 23, 23, .2);
  }
  .workspaceMenuGlyph i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .96; }
  .workspaceMenuCopy { display: grid; min-width: 0; gap: 2px; }
  .workspaceMenuCopy small {
    color: #8b8c93;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
  }
  .workspaceMenuCopy b {
    overflow: hidden;
    color: #171719;
    font-size: 11px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspaceMenuChevron { color: #85868d; transition: transform .24s cubic-bezier(.22, .78, .2, 1); }
  .workspaceSwitcher.open .workspaceMenuChevron { transform: rotate(180deg); }

  .workspaceSwitcher .topnav {
    position: absolute !important;
    top: calc(100% + 11px) !important;
    left: 0 !important;
    z-index: 3200 !important;
    display: block !important;
    width: min(560px, calc(100vw - 34px)) !important;
    max-height: min(650px, calc(100dvh - 90px));
    margin: 0 !important;
    padding: 10px 10px 13px !important;
    overflow: auto;
    border: 1px solid #dedee3 !important;
    border-radius: 20px !important;
    color: #18181b !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: 0 28px 75px rgba(17, 17, 19, .17), 0 3px 10px rgba(17, 17, 19, .05) !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-7px) scale(.985);
    transform-origin: 54px 0;
    pointer-events: none;
    backdrop-filter: blur(24px) saturate(145%);
    transition: opacity .18s ease, transform .24s cubic-bezier(.22, .78, .2, 1), visibility 0s linear .24s;
  }
  .workspaceSwitcher.open .topnav {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .workspaceMenuHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 43px;
    padding: 0 7px 5px 11px;
  }
  .workspaceMenuHead > span {
    color: #777980;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .workspaceMenuHead > button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #74757c !important;
    background: #f3f3f5 !important;
    font-size: 20px !important;
    line-height: 1;
  }
  .workspaceMenuSection { padding: 10px; border-top: 1px solid #ececef; }
  .workspaceMenuSection:not(:has(button:not([hidden]))) { display: none; }
  .workspaceMenuLabel {
    display: block;
    margin: 0 0 8px 2px;
    color: #92939a;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .workspaceMenuGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .workspaceSwitcher .topnav .workspaceMenuGrid > button {
    position: relative;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 7px;
    align-items: center;
    gap: 10px;
    min-height: 54px !important;
    padding: 6px 11px 6px 7px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: #34353a !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 780 !important;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease !important;
  }
  .workspaceSwitcher .topnav .workspaceMenuGrid > button:hover {
    border-color: #e6e6e9 !important;
    color: #111113 !important;
    background: #f6f6f8 !important;
  }
  .workspaceSwitcher .topnav .workspaceMenuGrid > button:active { transform: scale(.985); }
  .workspaceSwitcher .topnav .workspaceMenuGrid > button.active {
    border-color: rgba(237, 23, 23, .14) !important;
    color: #151517 !important;
    background: rgba(237, 23, 23, .07) !important;
    box-shadow: none !important;
  }
  .workspaceSwitcher .topnav .workspaceMenuGrid > button::after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    content: "";
    transform: scale(.4);
    transition: transform .18s ease, background .18s ease;
  }
  .workspaceSwitcher .topnav .workspaceMenuGrid > button.active::after { background: #ed1717; transform: scale(1); }
  .workspaceSwitcher .topnav .workspaceMenuGrid > button > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #5f6168;
    background: #f1f1f3;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    transition: color .16s ease, background .16s ease;
  }
  .workspaceSwitcher .topnav .workspaceMenuGrid > button.active > i { color: #fff; background: #ed1717; }
  [data-workspace-icon="library"]::before { content: "▦"; }
  [data-workspace-icon="bundles"]::before { content: "▤"; }
  [data-workspace-icon="rough"]::before { content: "▶"; font-size: 13px; }
  [data-workspace-icon="review"]::before { content: "◌"; font-size: 20px; }
  [data-workspace-icon="thumbnail"]::before { content: "▧"; }
  [data-workspace-icon="production"]::before { content: "⌗"; }
  [data-workspace-icon="trips"]::before { content: "◇"; }
  [data-workspace-icon="payments"]::before { content: "$"; font-size: 15px; }
  [data-workspace-icon="ingest"]::before { content: "⇢"; font-size: 19px; }

  .searchWrap { min-height: 46px !important; }
  #sidebarToggle,
  #refreshLibrary,
  #logout.ownerSignOut,
  .accountProfile { min-width: 44px !important; width: 44px; height: 44px; border-radius: 13px !important; }
  #logout.ownerSignOut { justify-content: center; padding: 0 !important; }
  #logout.ownerSignOut span,
  .accountProfile > span { display: none !important; }
  .accountProfile { justify-content: center; padding: 5px !important; }
  .accountProfile > i { width: 32px; height: 32px; }

  body.workspaceMenuOpen::after {
    position: fixed;
    inset: 68px 0 0;
    z-index: 999;
    background: rgba(17, 17, 19, .08);
    pointer-events: none;
    content: "";
    animation: workspaceScrimIn .18s ease both;
  }
  @keyframes workspaceScrimIn { from { opacity: 0; } }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .syncPill { width: 44px !important; min-width: 44px !important; padding: 0 !important; justify-content: center; }
  .syncPill span { display: none !important; }
}

@media (min-width: 768px) and (max-width: 920px) {
  body { padding-bottom: 0 !important; }
  .topbar {
    grid-template-columns: auto auto minmax(150px, 1fr) auto auto auto auto !important;
    grid-template-rows: 50px !important;
    min-height: 68px !important;
    padding: 9px 11px !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
  }
  .brand { min-width: 43px !important; }
  .topbarLockup > span { display: none !important; }
  .workspaceMenuToggle { width: 158px; }
  .workspaceSwitcher .topnav { left: -48px !important; }
  .searchWrap { grid-column: auto !important; grid-row: auto !important; width: 100% !important; margin: 0 !important; }
  .topbar .topnav { bottom: auto !important; right: auto !important; min-height: 0 !important; }
  .view { min-height: calc(100dvh - 68px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .workspaceMenuToggle,
  .workspaceMenuChevron,
  .workspaceSwitcher .topnav,
  .workspaceSwitcher .topnav button { transition: none !important; }
}