/* Floating things carry their own material: menus and toasts are the cover
   (black in light, a step off the desk at night), so they read as over the
   surface, not of it. A dialog is paper — something you write into. */

.dropdown {
  position: relative;
}

/* ─── Menu ───────────────────────────────────────────────────────────────── */

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 3px;
  width: 260px;
  max-width: calc(100vw - 2 * var(--tiles-gutter));
  padding: 10px;
  border-radius: var(--radius-menu);
  background: var(--cover);
  color: var(--on-cover);
  font-family: var(--font-display);
  box-shadow: var(--cover-shadow);
  opacity: 0;
  translate: 0 -6px;
  transition: opacity var(--transition-fast), translate var(--transition-fast), display var(--transition-fast) allow-discrete;
}

.menu--open {
  display: flex;
  opacity: 1;
  translate: 0 0;

  @starting-style {
    opacity: 0;
    translate: 0 -6px;
  }
}

.menu--left {
  right: auto;
  left: 0;
}

.menu--up {
  top: auto;
  bottom: calc(100% + 10px);
}

.menu--wide {
  width: 400px;
  padding: 12px;
}

/* The space switcher opens as a regular floating menu, just aligned under the
   title's left edge instead of the top-right default. */
.menu--switcher {
  right: auto;
  left: 0;
}

.menu__space {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 10px;
  border: 0;
  border-radius: var(--radius-row);
  background: transparent;
  color: var(--on-cover-dim);
  font: 700 28px/1.05 var(--font-display);
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;

  &:hover {
    background: var(--cover-soft-hover);
    color: var(--on-cover);
  }
}

.menu__space-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__item {
  display: flex;
  gap: 13px;
  align-items: center;
  width: 100%;
  padding: 13px 15px;
  border: 0;
  border-radius: var(--radius-row-sm);
  background: transparent;
  color: var(--on-cover-dim);
  font: 500 17px/1.2 var(--font-display);
  text-align: left;
  cursor: pointer;

  &:hover {
    background: var(--cover-soft-hover);
    color: var(--on-cover);
  }

  .menu--wide & {
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-row);
    font-size: 20px;
  }
}

.menu__item--current {
  background: var(--cover-hover);
  color: var(--on-cover);
  font-weight: 600;

  &:hover {
    background: var(--cover-hover);
    color: var(--on-cover);
  }
}

.menu__item--danger {
  color: var(--cover-danger);

  &:hover {
    background: var(--cover-danger-bg);
    color: var(--cover-danger-hover);
  }
}

.menu__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  color: var(--on-cover-muted);
}

.menu__icon--on {
  background: var(--accent);
  color: var(--on-accent);
}

.menu__logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: contain;
}

.menu__header {
  padding: 10px 15px 4px;
  font: 600 12px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-cover-muted);
}

.menu__separator {
  height: 1px;
  margin: 8px 15px;
  background: var(--cover-hover);

  .menu--wide & {
    margin: 10px 18px;
  }
}

/* ─── Dialog ─────────────────────────────────────────────────────────────── */

.dialog {
  position: fixed;
  inset: 0;
  width: 480px;
  max-width: calc(100vw - 2 * var(--tiles-gutter));
  max-height: calc(100vh - 2 * var(--tiles-gutter));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-sheet);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-display);
  box-shadow: var(--dialog-shadow);
  opacity: 0;

  &::backdrop {
    background: var(--backdrop);
  }

  &[open] {
    display: block;
  }

  & > turbo-frame {
    display: block;
  }
}

.dialog--wide {
  width: 560px;
}

.dialog--animated {
  animation: dialog-rise 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dialog-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dialog__body {
  padding: 34px 34px 30px;
}

.dialog__title {
  font: 700 32px/1.1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.dialog__lede {
  margin: 10px 0 26px;
  font: 400 18px/1.45 var(--font-display);
  color: var(--ink-lede);
}

.dialog__title + .field,
.dialog__title + .switch-row,
.dialog__title + form {
  margin-top: 26px;
}

.dialog .actions {
  position: sticky;
  bottom: 0;
  margin: 30px -34px -30px;
  padding: 20px 34px 30px;
  background: var(--card);
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 2 * var(--tiles-gutter));
  translate: -50% 0;
}

.toast__message {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  background: var(--cover);
  color: var(--on-cover);
  font: 500 17px/1.3 var(--font-display);
  box-shadow: var(--cover-shadow);
  transition: opacity 1s ease;

  &::before {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    content: "";
  }
}

.toast__message--alert::before {
  background: var(--color-danger);
}

@media (width <= 640px) {
  .menu {
    width: min(320px, calc(100vw - 2 * var(--tiles-gutter)));
  }

  .menu--wide {
    width: calc(100vw - 2 * var(--tiles-gutter));
  }

  .dialog {
    width: calc(100vw - 2 * var(--tiles-gutter));
    border-radius: var(--radius-tile);
  }

  .dialog__body {
    padding: 26px 22px 24px;
  }

  .dialog__title {
    font-size: 27px;
  }

  .dialog .actions {
    margin: 24px -22px -24px;
    padding: 16px 22px 24px;
  }

  .toast {
    bottom: 16px;
  }
}