/* MV_ActionSheet — bottom action sheet for touch / small viewports (#163).
   Pinned to the bottom edge, full-width, so it can never spill off-screen the
   way an anchored popover does near a viewport edge on a phone. */

.mv-action-sheet__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: rgba(20, 18, 14, 0.45);
}

.mv-action-sheet {
  width: 100%;
  max-width: 32rem;
  max-height: 80vh;
  overflow-y: auto;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  /* env(safe-area-inset-bottom) keeps the last action clear of the iOS home
     indicator. */
  padding: var(--space-xs) var(--space-sm) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.mv-action-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--color-border-strong);
  opacity: 0.6;
  margin: var(--space-xxs) auto var(--space-xs);
}

/* Tinted subject header (#302) — a band in the person's own node colour (set
   inline from subject.color; the accent-soft below is the fallback), with a
   white initials avatar that lifts off the tint (people = white name-pills),
   matching the desktop context menu's header so the two read as one menu. */
.mv-action-sheet__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
}

.mv-action-sheet__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  color: var(--color-accent);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-sm);
}

.mv-action-sheet__subject {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  color: var(--color-accent-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-action-sheet__list {
  display: flex;
  flex-direction: column;
}

.mv-action-sheet__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  touch-action: manipulation;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Warm wash on hover + keyboard focus instead of the old flat grey swap (#302),
   matching the desktop context menu. */
.mv-action-sheet__item:hover,
.mv-action-sheet__item:focus-visible,
.mv-action-sheet__item:active {
  background-color: var(--color-accent-soft);
  outline: none;
}

/* Visible keyboard focus ring (UI/UX RULE 5). */
.mv-action-sheet__item:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

/* Press feedback (UI/UX RULE 9) — a gentle dip, neutralised for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .mv-action-sheet__item:active {
    transform: scale(0.98);
  }
}

/* Destructive — red text at rest, an error-soft wash + red ring on hover/focus
   so Delete reads as a deliberate, dangerous action. */
.mv-action-sheet__item--danger {
  color: var(--color-error);
}

.mv-action-sheet__item--danger:hover,
.mv-action-sheet__item--danger:focus-visible,
.mv-action-sheet__item--danger:active {
  background-color: var(--color-error-soft);
  color: var(--color-error);
}

.mv-action-sheet__item--danger:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--color-error);
}

.mv-action-sheet__item-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* The relative-add medallions (shared `.mv-relation-medallion`, css/tree.css)
   run a touch larger on the roomier sheet rows than in the compact desktop menu. */
.mv-action-sheet__item .mv-relation-medallion {
  width: 28px;
  height: 28px;
}

.mv-action-sheet__separator {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-xxs) var(--space-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .mv-action-sheet {
    animation: mv-action-sheet-up var(--transition-base);
  }
  .mv-action-sheet__scrim {
    animation: mv-action-sheet-fade var(--transition-fast);
  }
}

@keyframes mv-action-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes mv-action-sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}