/* The pen's email chooser (design/pen-email.md): a desk card beside the pen; on the phone a
   bottom sheet over a 30% ink scrim. The hover caption (site.json emailChooser.caption) sits above the pen. */
.pen-chooser { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.pen-chooser.is-sheet.is-open { pointer-events: auto; background: rgba(42, 33, 28, 0.3); }

.pen-caption {
  position: fixed; margin: 0; padding: 3px 10px; transform: translate(-50%, -100%);
  border-radius: var(--radius-pill); background: var(--paper-raised); box-shadow: var(--shadow-1);
  font: 500 var(--text-small) / 1.4 var(--font-body); color: var(--ink); white-space: nowrap;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.pen-caption.is-shown { opacity: 1; }

.pen-card {
  position: fixed; width: 248px; padding: 16px; pointer-events: auto;
  border-radius: var(--radius-paper); box-shadow: var(--shadow-2); color: var(--ink);
  background: var(--paper-raised) url("../../public/assets/scene/paper.webp") 0 0 / 256px auto;
  animation: pen-in var(--dur-base) var(--ease-out);
}
@keyframes pen-in { from { opacity: 0; translate: 0 6px; } }
.pen-title { margin: 0; font: 500 24px / 1.1 var(--font-hand); }
.pen-address { margin: 4px 0 10px; font-size: 14px; color: var(--ink-soft); user-select: all; overflow-wrap: anywhere; }
.pen-card hr { margin: 0; border: 0; border-top: 1px solid var(--line); }
.pen-card:focus-visible { outline: none; box-shadow: var(--shadow-2); } /* the rows show focus; the card never rings */
.pen-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0 8px;
  border: 0; background: none; color: var(--ink); font: 400 15px / 1.2 var(--font-body); text-align: left; text-decoration: none;
  cursor: pointer; transition: background var(--dur-fast);
}
.pen-row:hover { background: var(--peach); }
.pen-out { color: var(--ink-soft); }

/* Phone: the bottom sheet. */
.is-sheet .pen-card {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; padding: 8px 20px calc(16px + env(safe-area-inset-bottom));
  border-radius: 14px 14px 0 0; animation: pen-up var(--dur-base) var(--ease-out);
}
@keyframes pen-up { from { translate: 0 100%; } }
.pen-handle { display: block; width: 36px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--line); }
.is-sheet .pen-row { min-height: 52px; }
.is-sheet .pen-cancel { justify-content: center; margin-top: 8px; font-weight: 600; border-top: 1px solid var(--line); }