/* The one confirmation shape, menus, sheets, toasts and tooltips (3e). */

.overlay-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.overlay-root > * {
  pointer-events: auto;
}

/* ------------------------------------------------------------------------------------------ */
/* Menu: grows from its origin at 96 %; the exit is a fifth faster, on the plain enter curve. */

.menu {
  position: fixed;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 24px));
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: 6px;
  box-shadow: 0 12px 40px -12px rgba(30, 26, 22, 0.35);
  font-size: calc(14.5px * var(--ts));
  display: flex;
  flex-direction: column;
  z-index: 60;
  animation: mx-menu-in var(--d-menu-in) var(--ease-enter) both;
  transform-origin: var(--origin, top left);
}
:root[data-theme='dark'] .menu {
  box-shadow: var(--e-floating);
}
.menu.is-leaving {
  animation: mx-menu-out var(--d-menu-out) var(--ease-enter) both;
  pointer-events: none;
}
.menu-label {
  padding: 8px 12px 6px;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-placeholder);
}
.menu-item {
  --focus-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 9px 12px;
  border-radius: 9px;
  text-align: left;
  color: var(--ink);
  white-space: nowrap;
}
.menu-item:hover,
.menu-item:focus-visible,
.menu-item.is-active {
  background: var(--ground-sunken);
  box-shadow: none;
}
:root[data-theme='dark'] .menu-item:hover,
:root[data-theme='dark'] .menu-item:focus-visible,
:root[data-theme='dark'] .menu-item.is-active {
  background: var(--surface-you);
}
.menu-item > svg {
  width: 16px;
  height: 16px;
  color: var(--ink-quiet);
}
.menu-item .menu-aside {
  margin-left: auto;
  padding-left: 16px;
  color: var(--ink-placeholder);
  font-size: var(--t-small);
}
.menu-item.is-danger {
  color: var(--danger);
}
.menu-item.is-checked::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.menu-item:disabled {
  color: var(--ink-disabled);
}
.menu-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}

/* ------------------------------------------------------------------------------------------ */
/* Dialog: backdrop and card move together, 240 ms in and 190 ms out. A serif question naming the
 * thing, one sentence on what happens, keep-it on the left, the verb on the right. */

.backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 70;
  animation: mx-fade var(--d-modal-in) var(--ease-enter) both;
}
.backdrop.is-leaving {
  animation: mx-fade-out var(--d-modal-out) var(--ease-exit) both;
}
.dialog {
  width: min(420px, 100%);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 60px -24px rgba(30, 26, 22, 0.45);
  animation: mx-modal-in var(--d-modal-in) var(--ease-enter) both;
}
:root[data-theme='dark'] .dialog {
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.backdrop.is-leaving .dialog {
  animation: mx-modal-out var(--d-modal-out) var(--ease-exit) both;
}
.dialog h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: calc(24px * var(--ts));
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.dialog p {
  font-size: calc(15px * var(--ts));
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.dialog .field {
  margin-top: 2px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  flex-wrap: wrap;
}
.dialog.is-wide {
  width: min(560px, 100%);
}

/* On a phone a dialog becomes a sheet from the bottom. */
@media (max-width: 859px) {
  .backdrop.is-sheet {
    align-items: flex-end;
    padding: 0;
  }
  .backdrop.is-sheet .dialog {
    width: 100%;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    animation: mx-sheet-in var(--d-open) var(--ease-enter) both;
    max-height: 88vh;
    overflow: auto;
  }
  .backdrop.is-sheet.is-leaving .dialog {
    animation: mx-sheet-out var(--d-modal-out) var(--ease-exit) both;
  }
  .backdrop.is-sheet .dialog-actions {
    flex-direction: column-reverse;
  }
  .backdrop.is-sheet .dialog-actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* Toasts invert the theme so they read as a different layer; one verb at most, and a visible
 * timer when Undo is on offer. */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 80;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--inverse);
  color: var(--inverse-ink);
  border-radius: var(--r-control);
  padding: 12px 16px;
  font-size: calc(14.5px * var(--ts));
  box-shadow: 0 12px 30px -12px rgba(30, 26, 22, 0.5);
  animation: mx-toast-in var(--d-message) var(--ease-spring) both;
}
.toast.is-leaving {
  animation: mx-fade-out var(--d-menu-out) var(--ease-exit) both;
}
.toast-text {
  flex: 1;
}
.toast-verb {
  --focus-radius: 6px;
  color: var(--inverse-accent);
  font-weight: 500;
}
:root[data-theme='light'] .toast-verb {
  color: #D9A98F;
}
.toast-timer {
  width: 20px;
  height: 20px;
  flex: none;
  transform: rotate(-90deg);
}
.toast-timer circle {
  fill: none;
  stroke-width: 1.5;
}
.toast-timer .track {
  stroke: var(--inverse-quiet);
  opacity: 0.6;
}
.toast-timer .left {
  stroke: var(--inverse-ink);
  stroke-dasharray: 56.5;
  animation: mx-undo-timer var(--timer, 6s) linear both;
}
@media (max-width: 859px) {
  .toasts {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* Tooltip: inverted, small, never a sentence. */
.tooltip {
  position: fixed;
  z-index: 90;
  background: var(--inverse);
  color: var(--inverse-ink);
  font-size: calc(12.5px * var(--ts));
  line-height: 1.3;
  padding: 7px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  animation: mx-fade var(--d-micro) var(--ease-enter) both;
}
.tooltip::after {
  content: '';
  position: absolute;
  left: var(--arrow, 50%);
  width: 8px;
  height: 8px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.tooltip.is-above::after {
  bottom: -4px;
}
.tooltip.is-below::after {
  top: -4px;
}