/* ══ ⚑ VERA ASKS, ON TOP — the one card every question is asked with ═══════════════════════════════════════════
   Stephen, 2026-10-17: "this should be how all clarifications are asked across the platform" — and 2026-10-18,
   the "are you sure?" questions too, in Vera's voice. Drawn by js/vx-vera-ask.js (VxAsk.html), which the guide,
   the app and the home page all use. Verdeaux green over the page, Vera and one question, a cream pill for each
   answer, an outlined way out. Its own colours and type, not the page's, so it reads as the same card everywhere.
   [[every-clarification-asks-on-top]] */
/* Centred by the sheet's own auto margins, not justify-content: a question with many answers ("Which part of your
   wedding is it for?") scrolls from its top instead of losing it above the screen. */
.vxva{position:fixed;inset:0;z-index:100010;background:rgba(28,28,28,.35);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}
.vxva-sheet{margin:auto 0;flex:0 0 auto;width:100%;max-width:360px;box-sizing:border-box;font-family:var(--ff-b,-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif);text-align:left;background:#2C4A3E;border-radius:18px;padding:18px 18px 16px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.vxva-h{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.vxva-h img{flex:0 0 auto;width:34px;height:34px;border-radius:50%;object-fit:cover;border:1.5px solid #C8A96E}
/* No line on the card ends on one word alone (Stephen: "No line ends on one word alone"): the question, its note and
   what Vera says under the answers wrap in even lines. */
.vxva-t{flex:1;min-width:0;margin:0;font-size:1rem;line-height:1.35;color:#FAF7F2;text-wrap:balance}
.vxva-n{margin:8px 0 0;font-size:.82rem;line-height:1.4;color:rgba(250,247,242,.72);text-wrap:balance}
.vxva-in{display:block;width:100%;box-sizing:border-box;margin-top:12px;min-height:48px;padding:12px 16px;border-radius:14px;border:1px solid #FAF7F2;background:#FAF7F2;color:#2C4A3E;font:inherit;font-size:1rem}
.vxva-b{display:block;width:100%;box-sizing:border-box;min-height:48px;margin-top:10px;padding:12px 16px;border-radius:999px;font:inherit;font-size:1rem;line-height:1.2;text-align:center;cursor:pointer;background:#FAF7F2;border:1px solid #FAF7F2;color:#2C4A3E;font-weight:500}
.vxva-o{background:transparent;border:1px solid rgba(250,247,242,.55);color:#FAF7F2;font-weight:400}
.vxva-b:focus-visible,.vxva-in:focus-visible{outline:2px solid #C8A96E;outline-offset:2px}
/* A question with more than one field names each one; a choice may carry its cost on a second, smaller line;
   a wrong answer is said on the card, in the gold that marks Vera's own words. */
.vxva-f{display:block;margin-top:12px}
.vxva-f .vxva-in{margin-top:4px}
.vxva-fk{display:block;font-family:var(--ff-m,ui-monospace, SF Mono, SFMono-Regular, Menlo, Consolas, monospace);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,247,242,.72)}
.vxva-bs{display:block;margin-top:2px;font-size:.82rem;font-weight:400;color:rgba(44,74,62,.8)}
/* A name that must fit one line ("Which hotel at MSP?"): it never wraps; one too long for the phone ends in … */
.vxva-b1{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vxva-o .vxva-bs{color:rgba(250,247,242,.72)}
.vxva-err{margin:10px 0 0;font-size:.85rem;line-height:1.35;color:#E8CF9C;text-wrap:balance}
.vxva-foot{margin-top:12px;font-size:.76rem}
.vxva-in[type="date"],.vxva-in[type="time"]{-webkit-appearance:none;appearance:none;text-align:left}
/* What she just set, said at the top of the next card. */
.vxva-done{margin:0 0 10px;font-size:.84rem;line-height:1.35;color:#E8CF9C;text-wrap:balance}
/* An empty date or time says what it is: Safari draws neither a placeholder nor an icon for one. */
.vxva-dt{position:relative;display:block;margin-top:12px}
.vxva-f .vxva-dt{margin-top:4px}
.vxva-dt .vxva-in{margin-top:0}
.vxva-dtph{position:absolute;inset:0;display:none;align-items:center;gap:8px;padding:0 16px;pointer-events:none;color:rgba(44,74,62,.62);font-size:1rem}
.vxva-dtph svg{flex:0 0 auto;color:#2C4A3E}
.vxva-dt .vxva-in:invalid:not(:focus){color:transparent}
.vxva-dt .vxva-in:invalid:not(:focus)+.vxva-dtph{display:flex}
.vxva-dt .vxva-in:invalid:not(:focus)::-webkit-calendar-picker-indicator{opacity:0}
/* An answer that deletes or undoes something: brick, not cream, so it never reads as the easy yes. The card opens
   on its way out ("Keep it"), so Enter never deletes. */
.vxva-x{background:#B94040;border-color:#B94040;color:#FAF7F2}
.vxva-x .vxva-bs{color:rgba(250,247,242,.8)}
.vxva-danger .vxva-sheet{box-shadow:0 12px 40px rgba(0,0,0,.3),inset 0 3px 0 #B94040}
@media (hover:hover){.vxva-b:hover{filter:brightness(.97)}.vxva-o:hover{border-color:#FAF7F2}.vxva-x:hover{background:#A03636;border-color:#A03636;filter:none}}