/* Ink reply (core/rsvp/004) — sage_light_rest w1 (INV-05, D-031, D-032 ruling C, A1319). A cotton reply card: the
   guest writes their name, circles "Joyfully accepts" or "Regretfully declines", picks how many are coming and may add
   a note. "Send reply" opens WhatsApp with the reply written out, as rs003; nothing is stored. Without JavaScript or
   with reduced motion the card shows the plain WhatsApp button instead. A still watercolour sage sprig is tucked
   behind the card's lower corner (ruling A: it never moves).
   CSS version: when the guest stops typing, their name appears on the signature line in Pinyon (a fade, never a
   wipe), and a drawn ink ellipse goes round the chosen answer (stroke-dashoffset, 420 ms).
   live.js (WebGL, replace): the name soaks into the paper as wet ink and dries lighter; the answer circle is a
   photographed pen loop drawn the way the pen went; pressing the card paper dents it. */
.rs014 { position: relative; padding: var(--k-section-pad) var(--k-gutter); background: var(--k-light-ground); color: var(--k-ink); text-align: center; touch-action: pan-y; }
.rs014__inner { max-width: var(--k-measure); margin: 0 auto; }
.rs014__by { margin-top: 18px; font: 400 1.0625rem/1.55 var(--k-font-body); color: var(--k-ink-soft); }
.rs014__by b { font-weight: 500; color: var(--k-ink); }

/* the card, with the sprig tucked behind its lower right corner */
.rs014__wrap { position: relative; max-width: 560px; margin: 38px auto 0; }
.rs014__sage {
  position: absolute; z-index: 0; right: 0; bottom: 0; width: clamp(132px, 38%, 212px); height: auto; pointer-events: none;
  transform: translate(8%, 58%) rotate(78deg); transform-origin: 50% 50%;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.rs014__card {
  position: relative; z-index: 1; padding: 46px clamp(22px, 6.4vw, 56px) 38px; text-align: left;
  background: var(--k-grain), var(--k-card); box-shadow: var(--k-shadow-paper);
}
.rs014__card::before { content: ""; position: absolute; z-index: 1; inset: 9px; border: 1px solid var(--k-line); pointer-events: none; }
/* the stage stops above the Send button: the ink lives higher up, and a phone canvas under 250k px² draws at the
   full device dpr, so the signature stays as crisp as the DOM text beside it */
.rs014__stage { position: absolute; z-index: 0; inset: 0 0 130px 0; pointer-events: none; }
.rs014__card.is-sent .rs014__stage { bottom: 0; }

/* the form sits above the live stage: the ink is drawn on the paper, under the fields */
.rs014-form { position: relative; z-index: 1; display: grid; gap: 22px; }
.rs014-form[hidden], .rs014-field[hidden], .rs014__plain[hidden] { display: none; }
.rs014-field { display: block; }
.rs014-field__l { display: block; margin-bottom: 6px; padding: 0; font: 400 .6875rem/1.3 var(--k-font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--c-secondary-dark); }
.rs014-field__l i { font-style: normal; letter-spacing: .04em; text-transform: none; color: var(--k-ink-soft); }
.rs014-input { display: block; width: 100%; padding: 6px 2px; border: 0; border-bottom: 1px solid rgb(var(--c-primary-rgb) / .45); border-radius: 0; background: transparent; font: 500 1.1875rem/1.4 var(--k-font-body); color: var(--k-ink); }
.rs014-input:focus { outline: none; border-bottom-color: var(--c-primary); box-shadow: 0 1px 0 var(--c-primary); }
.rs014-input--note { min-height: 84px; resize: vertical; }

/* the signature line: the name in Pinyon on a sage hairline (a mirror of the field, hidden from screen readers) */
.rs014-sig { margin: -2px 0 6px; }
.rs014-sig__name {
  --rs014-sfs: clamp(2.125rem, 9.4vw, 2.625rem);
  position: relative; height: calc(var(--rs014-sfs) * 1.22); border-bottom: 1px solid var(--k-line);
}
.rs014-sig__ink {
  position: absolute; left: .18em; bottom: -.5em; white-space: nowrap;
  font: 400 calc(var(--rs014-sfs) * var(--rs014-k, 1))/1.3 var(--k-font-script); color: var(--c-primary);
  opacity: 0; transition: opacity .6s ease-out;
}
.rs014-sig__ink.is-in { opacity: 1; }
.rs014-sig__ink.is-late { transition-delay: .15s; }
.rs014-sig__ink.is-out { opacity: 0; transition-duration: .15s; transition-delay: 0s; }
.rs014-sig__l { display: block; margin-top: 7px; font: 500 .625rem/1 var(--k-font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--k-ink-soft); }

/* the answer: two phrases to circle; the chosen one gets an ink ellipse drawn the way a pen goes (from upper right) */
.rs014-choice { display: grid; justify-items: start; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rs014-choice > .rs014-field__l { margin-bottom: 4px; }
.rs014-opt { position: relative; display: inline-flex; align-items: center; min-height: 50px; padding: 8px 22px; margin-left: -8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rs014-opt input { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.rs014-opt__t { font: 400 1.3125rem/1.3 var(--k-font-display); color: var(--k-ink); }
.rs014-opt input:focus-visible ~ .rs014-opt__t { outline: 2px solid var(--c-primary); outline-offset: 5px; }
.rs014-ring { position: absolute; left: -3px; top: -1px; width: calc(100% + 6px); height: calc(100% + 2px); overflow: visible; pointer-events: none; transition: opacity .15s linear; }
.rs014-ring__p {
  fill: none; stroke: rgb(var(--c-primary-rgb) / .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .42s cubic-bezier(.45, 0, .3, 1);
}
.rs014-opt input:checked ~ .rs014-ring .rs014-ring__p { stroke-dashoffset: 0; }

.rs014-send { justify-self: center; margin-top: 4px; }
.rs014-small { text-align: center; font: 400 .875rem/1.45 var(--k-font-body); color: var(--k-ink-soft); }
.rs014__plain { position: relative; z-index: 1; text-align: center; }
.rs014-thanks { position: relative; z-index: 1; margin-top: 20px; text-align: center; font: 400 1.1875rem/1.5 var(--k-font-display); color: var(--c-primary); }

/* sent: the card keeps the signature and the circled answer; the rest steps aside for the thank-you line */
.rs014-form.is-sent > .rs014-field, .rs014-form.is-sent > .rs014-send, .rs014-form.is-sent > .rs014-small,
.rs014-form.is-sent .rs014-choice > .rs014-field__l, .rs014-form.is-sent .rs014-opt:not(.is-chosen) { display: none; }
.rs014-form.is-sent { gap: 14px; }

@media (min-width: 768px) {
  .rs014__card { padding: 58px 60px 46px; }
  .rs014__sage { transform: translate(42%, 40%) rotate(78deg); }
}

/* live (Tier 3): the canvas draws the ink from its first frame; the CSS mirror and circles step aside at once.
   A circle that was already chosen when the layer mounted stays CSS (is-css) until the guest changes the answer. */
.rs014.is-live .rs014-sig__ink { visibility: hidden; }
.rs014.is-live .rs014-ring { opacity: 0; }
.rs014.is-live .rs014-opt.is-css .rs014-ring { opacity: 1; }

/* Replies W2 (A1505, D-068, plan §D7): a count per event, sticky details, the late line, the couple's extra questions.
   Labels and selects reuse .rs014-field__l and .rs014-input, so the only new colour is the error's. The accepts block and the
   questions stack on the form's own 22 px rhythm; the mine panel sits above the live paper like the form does. */
.rs014-yes, .rs014-extra { display: grid; gap: 22px; }
.rs014-yes[hidden], .rs014-extra:empty { display: none; }
.rs014-evs{margin:0}
.rs014-ev{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;padding:.6rem 0;border-bottom:0}
.rs014-ev__n{grid-column:1;grid-row:1}
.rs014-ev__d{grid-column:1;grid-row:2;font-size:.82em;color:var(--k-ink-soft)}
.rs014-ev__c{grid-column:2;grid-row:1 / span 2;min-width:7rem;min-height:44px;font-size:1rem;padding-right:22px}
.rs014-day{margin:1.1rem 0 0;font:400 .6875rem/1.3 var(--k-font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--c-secondary-dark)}
.rs014-help{margin:-.75rem 0 0;font-size:.85em;color:var(--k-ink-soft)}
.rs014-late{margin:.25rem 0 .75rem;font:400 1.0625rem/1.5 var(--k-font-display);color:var(--c-primary);text-align:center}
.rs014-err{margin:.25rem 0 .75rem;color:#8B2E2E}
.rs014-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rs014-mine{position:relative;z-index:1;margin:0;padding:0;border:0;border-radius:0}
.rs014-mine__t{margin:0 0 .9rem;font:400 1.1875rem/1.5 var(--k-font-display);color:var(--c-primary)}
.rs014-change{margin-right:.75rem}
.rs014-link{background:none;border:0;padding:.5rem 0;min-height:44px;text-decoration:underline;color:var(--k-ink-soft);font:400 .875rem/1.45 var(--k-font-body);cursor:pointer}
.rs014__card select, .rs014__card button { min-height: 44px; }

/* eye review rounds 1-2 (A1505): the signature's tail clears the "Signed" label; the error line is centred like the late line */
.rs014-sig__l { margin-top: 16px; }
.rs014-mine:not([hidden]) ~ .rs014-form { margin-top: 28px; }
.rs014-err { text-align: center; }