/* Compact leaderboard spacing across viewport sizes. */
.app-shell .page.board-page { padding-top: 20px; }
.board-page .heading-row { margin-top: 0; }

@media (min-width: 1000px) {
  .app-shell.workspace { --sidebar-width: 248px; }
  .app-shell.workspace.sidebar-collapsed { --sidebar-width: 56px; }
  .workspace .sidebar { width: var(--sidebar-width); padding: 16px 12px; overflow-x: hidden; overflow-y: auto; }
  .workspace.sidebar-collapsed .sidebar { padding-inline: 6px; }
  .workspace .topbar { display: none; }
  .workspace main { margin-left: var(--sidebar-width); padding-top: 0; }
  .sidebar-header { display: flex; align-items: center; height: 44px; flex: none; margin-bottom: 12px; }
  .sidebar .side-brand { display: flex; align-items: center; margin: 0; height: 44px; width: calc(100% - 44px); min-width: 0; overflow: hidden; }
  .sidebar .side-brand .brand-logo { margin-left: 5px; }
  .sidebar .brand-logo { flex: none; }
  .sidebar .sidebar-wordmark { color: #fff; white-space: nowrap; max-width: 150px; overflow: hidden; }
  .sidebar-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; color: #bdc8b7; }
  .sidebar-toggle .ui-icon { width: 18px; height: 18px; }
  .sidebar-toggle:hover,.sidebar .side-link:hover { background: #485743; color: #fff; }
  .sidebar-toggle:focus-visible,.sidebar .side-link:focus-visible { outline-offset: 2px; }
  .sidebar-navigation { display: flex; flex-direction: column; flex: 1; min-height: 340px; }
  .sidebar .side-link { min-height: 44px; padding: 12px; gap: 12px; overflow: hidden; }
  .sidebar .side-link > svg { width: 20px; height: 20px; flex: none; }
  .sidebar .side-link[data-route="profile"] { padding: 8px; }
  .sidebar .side-link > .avatar { width: 32px; height: 32px; font-size: 11px; }
  .sidebar .side-link-label { white-space: nowrap; max-width: 180px; min-width: 0; }
  .sidebar .side-label { overflow: hidden; white-space: nowrap; max-height: 24px; }
  .sidebar .side-bottom { padding-top: 0; margin-top: auto; }
  /* The rail keeps only the toggle here; Home remains available in the navigation. */
  .sidebar-collapsed .side-brand { opacity: 0; visibility: hidden; pointer-events: none; }
  .sidebar-collapsed .sidebar-wordmark,
  .sidebar-collapsed .side-link-label { max-width: 0; opacity: 0; visibility: hidden; transform: translateX(-6px); }
  .sidebar-collapsed .side-label { max-height: 0; opacity: 0; visibility: hidden; margin-bottom: 0; }
  .sidebar-collapsed .side-brand .brand-logo { margin-right: 0; }
  .sidebar-collapsed .brand-logo { transform: scale(.77); }
  .sidebar-collapsed .side-link { gap: 0; }
  .sidebar-collapsed .side-link > svg { transform: scale(.9); }
  .sidebar-collapsed .side-link[data-route="profile"] { padding: 6px; }
  .sidebar-collapsed .side-link > .avatar { transform: scale(.875); }
  .workspace:not(.sidebar-collapsed) .sidebar-toggle .ui-icon { transform: rotate(180deg); }
}

@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .workspace .sidebar { transition: width 240ms cubic-bezier(.2, .8, .2, 1), padding 240ms cubic-bezier(.2, .8, .2, 1); }
  .workspace main { transition: margin-left 240ms cubic-bezier(.2, .8, .2, 1); }
  .sidebar .sidebar-wordmark,.sidebar .side-link-label {
    transition: max-width 240ms ease, opacity 160ms ease, transform 240ms ease, visibility 160ms;
  }
  .sidebar .side-label { transition: max-height 240ms ease, margin-bottom 240ms ease, opacity 160ms ease, visibility 160ms; }
  .sidebar .brand-logo { transition: transform 240ms ease, margin-right 240ms ease; }
  .sidebar .side-brand { transition: opacity 160ms ease, visibility 160ms; }
  .sidebar .side-link { transition: gap 240ms ease, padding 240ms ease, background-color 160ms ease, color 160ms ease; }
  .sidebar .side-link > svg,.sidebar .side-link > .avatar,.sidebar-toggle .ui-icon { transition: transform 240ms ease; }
}