/* Two Cups: the sign-up modal (one <dialog> for every waitlist CTA).
   Mobile: a bottom sheet with a drag handle. Desktop (>= 760px): a centred 440px card.
   Paper style: paper surfaces, ink text, no shadows (only cards cast shadows). */

.tc-modal { padding: 0; border: 0; margin: 0; background: transparent; color: #1B1A17; max-width: none; max-height: none; overflow: visible;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; }
.tc-modal::backdrop { background: rgba(27,26,23,0.35); }
.tc-modal[open]::backdrop { animation: tcScrimIn 320ms cubic-bezier(0.16,1,0.3,1) both; }
.tc-modal.is-closing::backdrop { animation: tcScrimOut 220ms ease-in both; }

.tc-modal-card { position: relative; box-sizing: border-box; background: #EEE8DD; padding: 28px 24px 24px; display: flex; flex-direction: column; }

/* mobile: bottom sheet */
.tc-modal { position: fixed; inset: auto 0 0 0; width: 100%; }
.tc-modal-card { border-radius: 28px 28px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.tc-modal[open] .tc-modal-card { animation: tcSheetRise 520ms cubic-bezier(0.16,1,0.3,1) both; }
.tc-modal.is-closing .tc-modal-card { animation: tcSheetDrop 240ms cubic-bezier(0.4,0,1,1) both; }
/* On-screen keyboard (js/modal.js): iOS Safari and Android Chrome lay the keyboard over the page
   without resizing it, so bottom: 0 and 100dvh stay behind the keys. While a keyboard is up, the
   sheet sits on its top edge (--tc-kb) and is capped at the visible height (--tc-vvh), and the
   home-indicator padding goes, since the keyboard covers that strip. */
.tc-modal { transition: bottom 250ms cubic-bezier(0.16,1,0.3,1); }
.tc-modal[data-kb] { bottom: var(--tc-kb, 0px); }
.tc-modal[data-kb] .tc-modal-card { max-height: calc(var(--tc-vvh, 100dvh) - 12px); padding-bottom: 16px; }
.tc-modal-handle { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: flex; justify-content: center; padding-top: 8px; box-sizing: border-box; cursor: grab; touch-action: none; }
.tc-modal-handle span { width: 36px; height: 5px; border-radius: 3px; background: rgba(27,26,23,0.22); }

/* desktop: centred card */
@media (min-width: 760px) {
  .tc-modal { inset: 0; width: 440px; max-width: calc(100vw - 32px); margin: auto; height: fit-content; }
  .tc-modal-card { border-radius: 28px; padding: 32px; max-height: calc(100dvh - 48px); }
  .tc-modal[open] .tc-modal-card { animation: tcCardIn 420ms cubic-bezier(0.16,1,0.3,1) both; }
  .tc-modal.is-closing .tc-modal-card { animation: tcCardOut 200ms ease-in both; }
  .tc-modal-handle { display: none; }
}

.tc-modal-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: #1B1A17; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tc-modal-close:hover { background: rgba(27,26,23,0.06); }
.tc-modal-title:focus { outline: none; }
.tc-modal-title { margin: 0 44px 0 0; font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.tc-modal-body { margin: 8px 0 0; font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif; font-size: 18px; line-height: 26px; color: #5A564F; }

.tc-apple { margin-top: 24px; }
.tc-apple-btn { width: 100%; min-height: 50px; box-sizing: border-box; border: 0; border-radius: 999px; background: #000000; color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; font-size: 17px; line-height: 22px; font-weight: 600; cursor: pointer; }
.tc-apple-btn svg { margin-top: -3px; }
.tc-apple-btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.tc-or { margin: 16px 0 0; display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 18px; color: #5A564F; }
.tc-or::before, .tc-or::after { content: ""; flex: 1; height: 1px; background: rgba(27,26,23,0.16); }

.tc-join-modal { max-width: none; margin-top: 16px; gap: 12px; }
.tc-apple[hidden] + .tc-join-modal { margin-top: 24px; }
.tc-join-modal .tc-join-row { flex-direction: column; gap: 12px; }
.tc-join-modal .tc-join-row input[type=email] { flex: none; width: 100%; background: #F6F2EA; }
.tc-join-modal .tc-join-btn { width: 100%; }

.tc-join-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 0 4px; outline: none; }
.tc-done-portrait { display: block; position: relative; width: 72px; height: 72px; border-radius: 36px; overflow: hidden; background: #D9CDB8; }
.tc-done-portrait img { position: absolute; width: 168px; height: 252px; max-width: none; left: -50px; top: -28px; }
.tc-done-msg { margin: 16px 0 0; font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif; font-size: 22px; line-height: 30px; }
.tc-done-sub { margin: 6px 0 0; font-size: 15px; line-height: 20px; color: #5A564F; }
.tc-done-close { margin-top: 24px; width: 100%; height: 50px; border-radius: 999px; border: 1.5px solid #1B1A17; background: transparent; color: #1B1A17; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }

@keyframes tcScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcScrimOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes tcSheetRise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tcSheetDrop { from { transform: translateY(var(--tc-drag, 0px)); } to { transform: translateY(100%); } }
@keyframes tcCardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tcCardOut { from { opacity: 1; } to { opacity: 0; transform: translateY(8px); } }

/* Reduce Motion: fades only (site.css also turns animations off globally; these keep a short fade). */
@media (prefers-reduced-motion: reduce) {
  .tc-modal[open] .tc-modal-card, .tc-modal.is-closing .tc-modal-card { animation: none !important; }
  .tc-modal { transition: none; }
}

/* js/lock.js: no rubber-band or pull-to-refresh behind a locked page (iOS 16+). */
html.tc-locked { overscroll-behavior: none; }