/* A compact board with the emerald workspace navigation as its only top banner. */
.topbar { background:var(--green);color:#fff; }
.topbar .brand { color:#fff; }
.topbar .brand-icon { color:#fff;background:#ffffff24; }
.topbar .top-nav { background:#ffffff18; }
.topbar .top-nav button { color:#e0f1e8; }
.topbar .top-nav button:hover { color:#fff;background:#ffffff1a; }
.topbar .top-nav button.active { background:#fff;color:#087b4f;box-shadow:0 2px 8px #064b3012; }
.topbar .nav-count { color:#f0faf5;background:#ffffff24; }
.topbar .active .nav-count { color:#087b4f;background:#e5f3eb; }
.topbar .icon-button { color:#ecf7f1;background:#ffffff18; }
.topbar .icon-button:hover { color:#fff;background:#ffffff30; }
.topbar .profile-avatar { color:#fff;background:#ffffff24; }
.topbar button:focus-visible,.topbar a:focus-visible { outline-color:#bcebd1; }
.toolbar-right .create-button { min-height:33px;flex-shrink:0;padding:7px 12px;font-size:11px;gap:6px; }
.toolbar-right .create-button > svg { width:14px;height:14px; }
.toolbar-right .create-button kbd { margin-left:2px; }
@media(max-width:1050px) { .toolbar-right .create-button kbd { display:none; } }
@media(max-width:820px) {
  .toolbar-right .create-button { width:35px;min-width:35px;min-height:35px;padding:8px; }
  .create-task-text,.toolbar-right .create-button kbd { display:none; }
  .toolbar-right .create-button > svg { width:17px;height:17px; }
}
@media(pointer:coarse) { .toolbar-right .create-button { min-width:42px;min-height:42px; } }
@media(max-height:480px) and (max-width:820px) { .toolbar-right .create-button { min-width:31px;min-height:31px;width:31px; } }