/* plan — address (field stack that folds itself into an envelope) + the formal availability (module: plan). */

/* ---------- address: the field stack ---------- */
/* The stack sits at the bottom while it fits; with the keyboard up (core pads .fg.bottom by --kb) it scrolls instead of
   pushing the top fields out of the frame (plan.js nudges the focused field into the band above the keys). */
.address .fg.bottom { justify-content: flex-start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.address .fg.bottom::-webkit-scrollbar { display: none; }
.address .fg.bottom > .kicker { margin-top: auto; }
.address .stack { gap: 10px; }
.address .stack .field { margin: 0; }
.address .stack .row { display: flex; gap: 10px; align-items: flex-start; }
.address .stack .row .field { flex: 1 1 0; min-width: 0; }
.address .stack .row .field.postal { flex: 1.25 1 0; }
.address .field .label { margin-bottom: 6px; }
.address .field input { min-height: var(--control); padding: 0 16px; font: 500 var(--t-l)/1.3 var(--sans); }
.address .field input:focus { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(244, 238, 227, 0.08), 0 0 0 3px rgba(201, 164, 92, 0.18); }
.address .field.bad input { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(210, 104, 74, 0.22); }
.address .note { font-size: var(--t-s); color: var(--cream-60); margin: 12px 0 0; font-family: var(--display); font-style: italic; font-variation-settings: var(--wonk); letter-spacing: 0; }
.address .error { margin-top: 10px; }
.address .answers { margin-top: 20px; }
.address .answers .btn { margin-top: 8px; }
.address.sending .fg { pointer-events: none; }

/* the address text that lifts out of the fields and flies into the envelope (Flip.fit scales it to .addr) */
.mail-text { position: absolute; z-index: 5; font: 500 18px/1.35 var(--sans); color: var(--cream); white-space: pre-line; transform-origin: 0 0; pointer-events: none; will-change: transform; }

/* ---------- the mini envelope (200×130, same paper as the cold open) ---------- */
.mail-wrap { position: absolute; inset: 0; z-index: 4; perspective: 900px; pointer-events: none; }
.mail { position: absolute; left: 50%; top: 44%; width: 200px; height: 130px; margin: -65px 0 0 -100px; will-change: transform; } /* flat: the flap is the only 3D child, layered by z-index; the turn-over is two half turns on .mail */
.mail .rear, .mail .side { position: absolute; inset: 0; border-radius: 7px; }
.mail.turned .rear { visibility: hidden; }

/* the sealed side */
.mail .body { position: absolute; inset: 0; border-radius: 7px; background: linear-gradient(170deg, #efe7d8, #e2d8c4); box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.4); z-index: 1; }
.mail .body::before { content: ""; position: absolute; inset: 0; border-radius: 7px; background: linear-gradient(to bottom right, transparent 49.5%, rgba(16, 24, 39, 0.08) 50%, transparent 50.5%), linear-gradient(to bottom left, transparent 49.5%, rgba(16, 24, 39, 0.08) 50%, transparent 50.5%); }
.mail .front { position: absolute; inset: 0; z-index: 3; border-radius: 7px; background: linear-gradient(170deg, #ece3d2, #ddd2bc); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.mail .card { position: absolute; left: 9px; right: 9px; top: 8px; height: 114px; border-radius: 4px; background: var(--paper); z-index: 2; padding: 9px 12px; color: var(--ink); text-align: left; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); overflow: hidden; }
.mail .addr { font: 500 10.8px/1.35 var(--sans); color: var(--ink); white-space: pre-line; letter-spacing: 0; opacity: 0; }
.mail .flap { position: absolute; left: 0; right: 0; top: 0; height: 72px; z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d; background: linear-gradient(175deg, #f3ecde, #e6dcc8); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 7px 7px 0 0; backface-visibility: visible; }
.mail .flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, #d8ccb4, #cbbfa5); transform: rotateX(180deg); backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mail .flap.open { z-index: 0; }
.mail .seal { position: absolute; left: 50%; top: 56px; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; z-index: 5; background: radial-gradient(circle at 36% 32%, #e28868, var(--clay) 50%, #9e4a33); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -2px 5px rgba(0, 0, 0, 0.25), 0 5px 12px -3px rgba(0, 0, 0, 0.5); display: grid; place-items: center; color: var(--cream); font-family: var(--display); font-style: italic; font-size: 12px; line-height: 1; opacity: 0; }
.mail .shadow { position: absolute; left: 10%; right: 10%; bottom: -26px; height: 24px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%); z-index: 0; opacity: 0; }

/* the addressed side (after the turn): paper, an airmail stripe inside the edge, the address in ink, stamp, postmark */
.mail .side { z-index: 6; opacity: 0; overflow: hidden; background: linear-gradient(170deg, #f1e9da, #e4dac6); box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(16, 24, 39, 0.06); }
.mail.turned .side { opacity: 1; }
.mail .side::after { content: ""; position: absolute; inset: 0; border-radius: 7px; padding: 4px; background: repeating-linear-gradient(45deg, var(--clay) 0 7px, transparent 7px 14px, #2b3f6e 14px 21px, transparent 21px 28px); opacity: 0.85; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.mail .to { position: absolute; left: 16px; top: 30px; right: 56px; max-height: 78px; overflow: hidden; font: italic 400 11.5px/1.35 var(--display); font-variation-settings: var(--wonk); color: var(--ink); white-space: pre-line; text-wrap: pretty; }
.mail .stamp { position: absolute; top: 10px; right: 10px; width: 40px; height: 48px; z-index: 2; opacity: 0; background: radial-gradient(circle, #e8dfcb 1.5px, transparent 1.7px) -2.5px -2.5px / 5px 5px, #faf6ee; box-shadow: 0 1px 2px rgba(16, 24, 39, 0.18); }
.mail .stamp .in { position: absolute; inset: 3px; background: linear-gradient(160deg, #1d2d4d, var(--night-2)); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: inset 0 0 0 0.5px rgba(244, 238, 227, 0.35); }
.mail .stamp .mono { font: 400 14px/1 var(--display); letter-spacing: 0.02em; }
.mail .stamp .et { font-style: italic; color: var(--gold); font-variation-settings: var(--wonk); }
.mail .stamp .yr { font: var(--caps-xs); letter-spacing: 0.12em; color: var(--cream-60); }
.mail .mark { position: absolute; top: 11px; right: 36px; width: 40px; height: 40px; z-index: 3; opacity: 0; border-radius: 50%; border: 1.5px solid rgba(16, 24, 39, 0.55); color: rgba(16, 24, 39, 0.6); display: grid; place-items: center; font: var(--caps-xs); letter-spacing: 0.1em; mix-blend-mode: multiply; transform: rotate(-12deg); }
.mail .mark::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(16, 24, 39, 0.4); }
.mail .mark i { position: absolute; left: calc(100% + 3px); width: 22px; border-top: 1.5px solid rgba(16, 24, 39, 0.45); }
.mail .mark i:nth-child(1) { top: 13px; } .mail .mark i:nth-child(2) { top: 19px; width: 26px; } .mail .mark i:nth-child(3) { top: 25px; }
.mail .avion { position: absolute; left: 16px; bottom: 11px; font: var(--caps-xs); letter-spacing: var(--caps-xs-track); text-transform: uppercase; color: var(--clay); }
.mail-cap { position: absolute; left: var(--pad); right: var(--pad); top: calc(44% + 84px); margin: 0; text-align: center; font: italic 400 16px/1.3 var(--display); font-variation-settings: var(--wonk); color: var(--cream-60); opacity: 0; }
/* reduced / no-GSAP: the posted envelope at rest */
.mail.posted .stamp, .mail.posted .mark, .mail.posted ~ .mail-cap { opacity: 1; }

/* ---------- availability: the pill payoffs ---------- */
.availability .answers { margin-top: 24px; }
.availability .choice .face.back.paper { background: var(--paper); color: var(--ink); }
.availability .choice.flipped.paper { border-color: var(--paper); box-shadow: 0 0 0 1px var(--paper); }
.availability .choice.flipped.clay { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay), 0 0 24px -6px rgba(210, 104, 74, 0.55); }
.availability .choice .face.back span:first-child { font-family: var(--display); font-weight: 400; font-style: italic; font-variation-settings: var(--wonk); font-size: 19px; letter-spacing: -0.01em; }
.availability .choice.prev .face.front::after { content: attr(data-prev); font: var(--caps-xs); letter-spacing: var(--caps-xs-track); text-transform: uppercase; color: var(--clay); margin-left: auto; padding-left: 8px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .mail-text { display: none; }
  .mail .addr, .mail .seal { opacity: 1; }
}