/* Motion confirms interaction and keeps the compact navigation continuous. */
.design-workspace {
  --motion-feedback: 140ms;
  --motion-reveal: 180ms;
  --motion-rail: 220ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .design-workspace :is(.primary, .quiet, .alerts-button, .request,
    .notification, .person-row, .dash-request, .segments button,
    .tabs button, .calendar-day button[data-g-event], .month-picker-grid button) {
    transition: background-color var(--motion-feedback) ease,
      border-color var(--motion-feedback) ease,
      color var(--motion-feedback) ease,
      box-shadow var(--motion-feedback) ease;
  }

  .design-workspace :is(input, textarea, select) {
    transition: border-color var(--motion-feedback) ease,
      background-color var(--motion-feedback) ease;
  }

  .design-workspace .account-control > #preview-options::after {
    transition: transform var(--motion-reveal) var(--motion-ease);
  }

  .design-workspace .account-control > #preview-options[aria-expanded="true"]::after {
    transform: rotate(225deg);
  }

  .design-workspace :is(.account-menu:not([hidden]), .month-picker-popup) {
    animation: grt-disclosure-reveal var(--motion-reveal) var(--motion-ease);
  }

  .design-workspace #calendar-event-dialog[open] {
    animation: grt-surface-reveal var(--motion-reveal) var(--motion-ease);
  }

  .design-workspace #calendar-event-dialog[open]::backdrop {
    animation: grt-backdrop-reveal var(--motion-reveal) ease-out;
  }

  .design-workspace #feedback:not(:empty) {
    animation: grt-surface-reveal var(--motion-reveal) var(--motion-ease);
  }
}

/* The rail is fixed: its width changes never move the page or calendar. */
@media (min-width: 951px) {
  .design-workspace .sidebar {
    transition: width var(--motion-rail) var(--motion-ease),
      padding-inline var(--motion-rail) var(--motion-ease),
      box-shadow var(--motion-rail) ease;
  }

  .design-workspace .sidebar .brand,
  .design-workspace .sidebar:is(:hover, :focus-within) .brand {
    height: 61px;
    min-height: 61px;
    padding: 0;
    gap: 0;
    align-items: flex-start;
    transition: padding-inline var(--motion-rail) var(--motion-ease);
  }

  .design-workspace .sidebar:is(:hover, :focus-within) .brand {
    padding-inline: 12px;
  }

  .design-workspace .sidebar :is(.brand-logo, .brand-logo img) {
    transition: width var(--motion-rail) var(--motion-ease);
  }

  .design-workspace .sidebar .workspace-label,
  .design-workspace .sidebar:is(:hover, :focus-within) .workspace-label {
    display: block;
    position: absolute;
    inset: 92px auto auto 32px;
    margin: 0;
    white-space: nowrap;
  }

  .design-workspace .sidebar nav,
  .design-workspace .sidebar:is(:hover, :focus-within) nav {
    margin-top: 24px;
  }

  .design-workspace .sidebar nav a,
  .design-workspace .sidebar:is(:hover, :focus-within) nav a {
    position: relative;
    justify-content: flex-start;
    padding: 14px 15px;
    transition: padding-inline var(--motion-rail) var(--motion-ease),
      background-color var(--motion-feedback) ease,
      color var(--motion-feedback) ease;
  }

  .design-workspace .sidebar:is(:hover, :focus-within) nav a {
    padding-inline: 12px;
  }

  .design-workspace .sidebar nav a > span,
  .design-workspace .sidebar:is(:hover, :focus-within) nav a > span,
  .design-workspace .sidebar .profile > span:not(.avatar),
  .design-workspace .sidebar:is(:hover, :focus-within) .profile > span:not(.avatar) {
    display: block;
    position: absolute;
    inset-inline-start: 45px;
    white-space: nowrap;
  }

  .design-workspace .sidebar .profile,
  .design-workspace .sidebar:is(:hover, :focus-within) .profile {
    position: relative;
    justify-content: flex-start;
    padding: 12px 8px;
    transition: background-color var(--motion-feedback) ease;
  }

  .design-workspace .sidebar .profile > span:not(.avatar),
  .design-workspace .sidebar:is(:hover, :focus-within) .profile > span:not(.avatar) {
    inset-inline-start: 55px;
  }

  .design-workspace .sidebar .profile > .avatar,
  .design-workspace .sidebar:is(:hover, :focus-within) .profile > .avatar {
    display: inline-grid;
  }

  .design-workspace .sidebar :is(.workspace-label, nav a > span,
    .profile > span:not(.avatar)) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 110ms ease, visibility 110ms;
  }

  .design-workspace .sidebar:is(:hover, :focus-within)
    :is(.workspace-label, nav a > span, .profile > span:not(.avatar)) {
    opacity: 1;
    visibility: visible;
    transition-delay: 60ms;
  }

  .design-workspace .sidebar .profile:hover {
    background-color: #f7f9fd;
  }
}

@keyframes grt-disclosure-reveal {
  from { opacity: .5; clip-path: inset(0 0 8% round 12px); }
  to { opacity: 1; clip-path: inset(0 round 12px); }
}

@keyframes grt-surface-reveal {
  from { opacity: .55; }
  to { opacity: 1; }
}

@keyframes grt-backdrop-reveal {
  from { background-color: #18243a00; }
  to { background-color: #18243a66; }
}

/* Keep hover and focus feedback immediate, without spatial movement. */
@media (prefers-reduced-motion: reduce) {
  .design-workspace *,
  .design-workspace *::before,
  .design-workspace *::after,
  .design-workspace *::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}