/* Keep all calendar states in flow so the glass tile grows with its content,
   including when the wide desktop grid top-aligns the other widgets. */
#widgets-root .tb-widget--cal { position: relative; min-width: 0; align-self: stretch; }
#widgets-root .tb-cal-account {
  position: absolute;
  top: 49px;
  right: 16px;
  max-width: 77px;
  overflow: hidden;
  color: rgba(255, 255, 255, .8);
  font-size: 9px;
  line-height: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#widgets-root .tb-cal-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin-top: 6px;
}

#widgets-root .tb-cal-content [hidden] { display: none !important; }
#widgets-root .tb-cal-meta {
  flex: 0 0 auto;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: 9px;
  font-weight: 600;
  line-height: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#widgets-root .tb-cal-upcoming,
#widgets-root .tb-cal-empty {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex: 0 0 auto;
  max-height: 28px;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#widgets-root .tb-cal-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
#widgets-root .tb-cal-connect {
  max-width: 100%;
  min-height: 21px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 7px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
  cursor: pointer;
}

#widgets-root .tb-cal-connect:hover { background: rgba(255, 255, 255, .23); }
#widgets-root .tb-cal-connect:disabled { cursor: progress; opacity: .65; }
#widgets-root .tb-cal-open {
  max-width: 100%;
  color: rgba(255, 255, 255, .9);
  font-size: 9px;
  line-height: 12px;
  white-space: nowrap;
  text-decoration: none;
}

#widgets-root .tb-cal-open:hover,
#widgets-root .tb-cal-upcoming:hover { text-decoration: underline; text-underline-offset: 2px; }
#widgets-root .tb-cal-status {
  flex: 0 0 auto;
  overflow: hidden;
  color: #ffd79c;
  font-size: 9px;
  line-height: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#widgets-root .tb-widget--cal[data-calendar-state='error'] .tb-cal-meta,
#widgets-root .tb-widget--cal[data-calendar-state='setup'] .tb-cal-meta { color: #ffd79c; }
#widgets-root .tb-cal-content :is(button, a):focus-visible { outline: 2px solid #b6ddff; outline-offset: 3px; }

@media (min-width: 769px) and (max-height: 860px) {
  #widgets-root .tb-cal-account { top: 36px; }
  #widgets-root .tb-cal-content { gap: 2px; }
  #widgets-root .tb-cal-actions { gap: 2px; }
}