/* Wedding cards (Oct 30 2026): shared look for the Bridesmaid card (/w/, body.bridal) and the Groomsman card (/g/,
   body.groom) and their makers. Loaded AFTER style.css + theme-light.css. CSS only, no inline styles (CSP unchanged).
   Text colours keep the white theme's contrast (all text pairs >= 4.5:1, checked in tests/e2e_wedding.py). */
body.bridal{--w-acc:#b45a78;--w-acc-dk:#7d2e4c;--w-ribbon:#e8a0b4;--w-soft:#fbeef1;--w-btn:#9b3f60;--w-btn-sh:#6a2440;--w-step:#f4c9d3;--w-step-tx:#4a1a2c}
body.groom{--w-acc:#1f3557;--w-acc-dk:#14243d;--w-ribbon:#c9a227;--w-soft:#eef1f6;--w-btn:#1f3557;--w-btn-sh:#0e1a2e;--w-step:#e9d8a6;--w-step-tx:#2a2108}
.card{border-color:var(--w-ribbon)}
/* Cover: the blurred picture tied with one ribbon across, the name tag hanging from it (PLAN 4g). */
.cover .art::before{content:"";position:absolute;z-index:1;left:0;right:0;top:46%;height:26px;margin-top:-13px;background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,0) 40%),var(--w-ribbon);box-shadow:0 2px 6px rgba(30,20,20,.22)}
.cover .tagpanel{border-color:var(--w-acc-dk);background:rgba(255,252,248,.96)}
.cover .tagpanel::before{border-color:var(--w-acc-dk);background:#fff}
.cover .tagpanel::after{content:"";position:absolute;top:-40px;left:50%;width:3px;height:34px;margin-left:-1.5px;border-radius:2px;background:var(--w-acc-dk)}
.tagpanel h1{color:var(--w-acc-dk)}
.tagpanel p{color:#4a3a3a}
.brand{color:var(--w-acc-dk)}
h2,h3{color:var(--w-acc-dk)}
/* QA D2 (Oct 30): no automatic hyphenation, so role words never split ("ma-/tron"); overflow-wrap stays as the safety net */
#revealTitle{color:var(--w-acc-dk);overflow-wrap:anywhere;-webkit-hyphens:manual;hyphens:manual}
.btn{background:var(--w-btn);color:#fff;box-shadow:0 4px 0 var(--w-btn-sh),0 8px 18px rgba(40,20,30,.18)}
.btn.secondary{background:#fff;color:var(--w-acc-dk);border:2px solid var(--w-acc-dk);box-shadow:none}
.cbody .btn.secondary,.btn.secondary{border-color:var(--w-acc-dk);color:var(--w-acc-dk)}
.step{background:var(--w-step);color:var(--w-step-tx)}
.progress-steps .bar>div{background:var(--w-acc)}
a,.endnote a{color:var(--w-acc-dk)}
/* P.S. line under the sign-off */
.psline{font-size:1.125rem;font-style:italic;text-align:left;margin-top:.8rem}
/* The question's two answers: side by side, exactly the same size (no "No" button, PLAN 4g) */
/* QA D1 (Oct 30): when both don't fit on one line (e.g. 200% phone text), they stack, each full width, still the same size.
   The column minimum is in rem so it grows with the text size; "Let me think" fits on one line at that width.
   grid-auto-rows:1fr keeps both the same height when stacked, even if one wraps. */
.askrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.75rem),1fr));grid-auto-rows:1fr;gap:.6rem;margin-top:1rem}
.askrow .btn{margin:0;min-height:56px;min-width:0;width:100%}
/* ammar N2 (Oct 30): below ~400 px, less side padding so "Let me think" and "Read again" stay on one line in the
   full-width stacked buttons at 200% text (D1 stacking and equal sizes unchanged). */
@media (max-width:399px){.askrow .btn,#again{padding-left:.4rem;padding-right:.4rem}}
@media (max-width:339px){.askrow{gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,6.75rem),1fr))}.askrow .btn{font-size:1rem;padding:.6rem .4rem}}
.reply{margin-top:1rem;padding:.9rem;border-radius:14px;background:var(--w-soft);border:1px solid var(--w-ribbon)}
.reply h3{margin:0 0 .5rem;font-size:1.25rem}
.reply p{margin:.3rem 0}
.reply textarea{width:100%;min-height:4.5rem;font-size:1rem}
.replyrow .btn{margin:.45rem 0}
.linkbtn{background:none;border:0;padding:.5rem 0;font:inherit;color:var(--w-acc-dk);text-decoration:underline;cursor:pointer;min-height:44px}
.offscreen{position:fixed;left:-9999px;top:0;opacity:0}
.role-note{margin:.5rem 0;padding:.6rem .75rem;border-left:4px solid var(--w-acc);background:var(--w-soft);color:#2b1d22;border-radius:6px}
.role-note:empty{display:none}
.ask-preview{margin:.4rem 0 0;font-family:var(--serif);font-size:1.0625rem;color:#3a2a2e}
/* the reveal's confetti is drawn over the card on phones (same rule as the birthday card, QA D1) */
@media (max-width: 699px) { canvas.fx.party { z-index: 30; } }
/* the solved card's end box already carries the studio name + AI note, so the footer hides while it shows */
body:has(#endBox:not(.hidden)) > .wrap > footer { display: none; }
.cbody h2{color:var(--w-acc-dk)}