/* The invitation at the end of the film, set as the couple's chosen card ("Hoa vẽ tay", tokens.css): it floats
   over the night scene on every screen with its buttons underneath; cream stock, marker-drawn flowers hanging
   from its top right corner and a posy at its foot, the words in EB Garamond, the couple's hand in Dancing
   Script. The whole card shows on one screen, shrunk whole only as far as it must (arrival-section.js). */
.sheet.is-card {
  display: grid; place-items: center; padding: calc(0.7rem + var(--safe-top)) 0.6rem calc(0.4rem + var(--safe-bottom));
  background: rgba(var(--shadow-rgb), 0); transition: background 0.4s ease;
}
.sheet.is-card.is-open { pointer-events: auto; background: rgba(var(--shadow-rgb), 0.45); }
.sheet.is-card .sheet-panel {
  position: relative; inset: auto; width: min(25rem, 100%); height: auto; border-radius: 0;
  /* As tall as the screen allows (the sheet's padding aside): the body scrolls inside, so the buttons can pin. */
  max-height: calc(100dvh - 1.1rem - var(--safe-top) - var(--safe-bottom));
  background: none; box-shadow: none; opacity: 0; transform: translateY(26px) scale(0.96);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
}
.sheet.is-card.is-open .sheet-panel { opacity: 1; transform: none; }
.sheet.is-card .sheet-handle, .sheet.is-card .sheet-title { display: none; }
/* Close: a small, thin × on a glass disc above the card's top-right corner, clear of its flourish (a tap
   anywhere outside the card closes it too). 44 px to tap, 26 px to see. */
.sheet.is-card .sheet-header { position: absolute; top: -0.25rem; right: -0.15rem; z-index: 2; padding: 0; }
.sheet.is-card .sheet-close {
  position: relative; width: var(--tap); height: var(--tap); min-height: 0; padding: 0; border-radius: 50%; font-size: 0;
  background: none; box-shadow: none;
}
.sheet.is-card .sheet-close::before {
  content: ''; position: absolute; inset: 0.55rem; border-radius: 50%; background: rgba(var(--shadow-rgb), 0.34);
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sheet.is-card .sheet-close::after {
  content: ''; position: absolute; inset: 0; background: var(--paper);
  -webkit-mask: var(--icon-close) center / 0.8rem no-repeat; mask: var(--icon-close) center / 0.8rem no-repeat;
}
.sheet.is-card {
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}
.sheet.is-card .sheet-body { min-height: 0; padding: 0; overflow-y: auto; scrollbar-width: none; }
.sheet.is-card .sheet-body::-webkit-scrollbar { display: none; }
/* A portrait card: the same width on a wide screen, so its flowers and type keep their proportions. */
@media (min-width: 900px) {
  .sheet.is-card .sheet-panel { width: min(27rem, 100%); }
}

/* The card stock: plain cream, the flowers bleeding off its edges behind the words, a soft shadow on the night.
   Lengths in cqi follow the card's width, so the flowers and the type keep their places on any screen. */
.sheet-body .card-section.invitation-card {
  --pf-coral: var(--flower-coral);
  --pf-salmon: var(--flower-salmon);
  --pf-pink: var(--flower-pink);
  --pf-red: var(--flower-red);
  --pf-amaranth: var(--flower-amaranth);
  --pf-wine: var(--flower-wine);
  --pf-ink: var(--flower-ink);
  --pf-gold: var(--flower-gold);
  --pf-lemon: var(--flower-lemon);
  --pf-leaf: var(--flower-leaf);
  position: relative; overflow: hidden; container-type: inline-size; margin: 1.9rem auto 0; padding: 1.4rem 1.3rem 1.1rem;
  text-align: center; font-size: var(--fs-note); line-height: 1.5; color: var(--ink); border-radius: 6px;
  background: var(--paper) var(--paper-grain); box-shadow: 0 26px 70px rgba(var(--shadow-rgb), 0.55);
}
.invitation-card :where(p) { margin: 0; }
.inv-flowers { position: absolute; pointer-events: none; }
.inv-flowers svg { display: block; width: 100%; height: auto; overflow: visible; }
.inv-flowers.is-top { right: -6cqi; top: -4cqi; width: 46cqi; }
.inv-flowers.is-bottom { left: -7cqi; bottom: -4cqi; width: 37cqi; }
.inv-head, .inv-events, .inv-families, .inv-foot { position: relative; }

/* Spaced capitals only for short labels. */
.inv-kicker, .inv-family-label, .inv-event-title, .inv-invite {
  font-family: var(--font-ui); font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--caps-track); text-transform: uppercase;
  color: var(--brand-soft);
}

/* Beside the hanging flowers, down to the hibiscus: the couple in their hand, the announcement, the guest. */
.inv-head { width: 63%; min-height: 94cqi; display: grid; align-content: start; gap: 0.15rem; }
.inv-couple { margin: 0.35rem 0 0.4rem; font-family: var(--font-script); font-weight: 600; color: var(--brand); }
.inv-name { font-size: min(2.8rem, 12cqi); line-height: 1.1; white-space: nowrap; }
.invitation-card .couple-amp.inv-join { margin: 0; font-family: var(--font-script); font-size: min(1.7rem, 7.2cqi); line-height: 1; color: var(--amp); }
.invitation-card .couple-amp.inv-join::before, .invitation-card .couple-amp.inv-join::after { display: none; }
.inv-lead { font-family: var(--font-serif); font-style: italic; font-size: min(1.2rem, 5.6cqi); line-height: 1.4; text-wrap: balance; }
.inv-to { margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid rgba(var(--rule-rgb), 0.6); }
.inv-guest { font-family: var(--font-script); font-weight: 600; font-size: min(2.1rem, 9.2cqi); line-height: 1.3; color: var(--brand); text-wrap: balance; }
.inv-attend { font-size: min(1.05rem, 4.9cqi); line-height: 1.4; text-wrap: balance; }

/* The ceremonies side by side between olive rules: the label, the weekday in the hand, the day in figures. */
.inv-events {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: 0.4rem; padding: 0.75rem 0;
  border-block: 1px solid rgba(var(--rule-rgb), 0.6);
}
.inv-event { display: grid; align-content: start; gap: 0.1rem; padding: 0 0.35rem; container-type: inline-size; }
.inv-event + .inv-event { border-left: 1px solid rgba(var(--rule-rgb), 0.6); }
.inv-day { display: grid; margin-top: 0.1rem; color: inherit; text-decoration: none; }
.inv-day-weekday { font-family: var(--font-script); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--brand); }
.inv-day-date { font-weight: 500; font-size: min(1.7rem, 15cqi); line-height: 1.15; letter-spacing: 0.01em; color: var(--ink); }
.inv-event-time { font-weight: 500; }
.inv-event-lunar { font-style: italic; font-size: 0.93em; line-height: 1.35; color: var(--ink-soft); text-wrap: balance; }
.inv-place { display: grid; margin-top: 0.4rem; line-height: 1.35; color: inherit; text-decoration: none; text-wrap: balance; }
.inv-event-venue { font-weight: 500; }
.inv-event-address { font-size: 0.93em; text-wrap: balance; }

/* The place opens the map, the day (once its hour is known) the calendar: the whole block is the tap target,
   a small icon by the venue or the date says where it leads, the address is underlined. */
.invitation-card {
  --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.6a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E");
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2zM5 10v10h14V10zm2 2h4v4H7z'/%3E%3C/svg%3E");
}
:is(.inv-place, .inv-day).is-link:active { background: rgba(var(--brand-rgb), 0.08); }
.inv-place.is-link .inv-event-venue::before, .inv-day.is-link .inv-day-date::after {
  content: ''; display: inline-block; width: 0.78em; height: 0.78em; vertical-align: -0.04em; background: currentColor;
  -webkit-mask: var(--icon-pin) center / contain no-repeat; mask: var(--icon-pin) center / contain no-repeat;
}
.inv-place.is-link .inv-event-venue::before { margin-right: 0.2em; }
.inv-day.is-link .inv-day-date::after { width: 0.6em; height: 0.6em; margin-left: 0.25em; vertical-align: 0.05em; -webkit-mask-image: var(--icon-calendar); mask-image: var(--icon-calendar); }
.inv-place.is-link .inv-event-address { text-decoration: underline dotted rgba(var(--brand-soft-rgb), 0.6); text-underline-offset: 3px; }

/* Both families, the groom's on the left, above the posy. */
.inv-families { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 0.75rem 0 0.3rem; line-height: 1.4; }
.inv-family-label { margin-bottom: 0.2rem; color: var(--brand); }
.inv-family-place { color: var(--ink-soft); }

/* The thanks beside the posy, in the couple's hand. */
.inv-foot { display: grid; align-items: center; min-height: 46cqi; padding-left: 36cqi; }
.inv-presence { font-family: var(--font-script); font-weight: 600; font-size: min(1.35rem, 6.6cqi); line-height: 1.35; color: var(--brand); text-wrap: balance; }

/* Under the card, on the night: a slip of the same cream stock, as wide as the card, an olive hairline framing it as
   a printed card's border; three segments split by short olive rules like the ceremonies', each a marker-drawn icon
   (tool-icons.js) over its word in the card's ink (Ảnh cưới, Chia sẻ, Xem lại phim), 44 px or more to tap. Pinned at
   the foot. */
.inv-actions { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 0.2rem; margin: 0.55rem auto 0; padding: 0; }
.inv-tools {
  /* As wide as the card, but never so narrow that a word breaks. */
  width: 100%; max-width: max(var(--tools-width, 100%), 19rem); justify-self: center; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 0.2rem; border-radius: 6px; background: var(--paper) var(--paper-grain);
  outline: 1px solid rgba(var(--rule-rgb), 0.6); outline-offset: -4px; box-shadow: 0 14px 40px rgba(var(--shadow-rgb), 0.5);
}
.inv-tool {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 0.1rem; min-height: 3.3rem; padding: 0.35rem 0.2rem 0.3rem;
  border: 0; border-radius: 4px; background: none; cursor: pointer; font: 500 var(--fs-note)/1.15 var(--font-serif); color: var(--ink);
  white-space: nowrap;
}
.inv-tool + .inv-tool::before {
  content: ''; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: rgba(var(--rule-rgb), 0.7);
}
.inv-tool-icon { display: block; width: 1.6rem; height: 1.6rem; }
.inv-tool-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.inv-tool:active { background: rgba(var(--brand-rgb), 0.1); }
.inv-tool:active .inv-tool-icon { transform: translateY(1px); }
.inv-tool:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* The wish from afar: a quiet line of its own under the pills, in cream over the dimmed scene. */
.inv-far-wish {
  justify-self: center; min-height: 1.9rem; padding: 0 0.5rem; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: italic 500 var(--fs-note) var(--font-serif); color: var(--paper);
  text-decoration: underline dotted rgba(var(--paper-rgb), 0.7); text-underline-offset: 4px;
}
.inv-far-wish::after { content: ' ›'; font-style: normal; }
/* On a short screen, before shrinking: smaller flowers and less air round the words, so the card stays large. */
.sheet-body .card-section.invitation-card.is-compact { padding: 1.1rem 1.1rem 0.8rem; }
.is-compact .inv-flowers.is-top { right: -5cqi; top: -3cqi; width: 36cqi; }
.is-compact .inv-flowers.is-bottom { width: 29cqi; }
.is-compact .inv-head { width: 68%; min-height: 78cqi; }
.is-compact .inv-to { margin-top: 0.55rem; padding-top: 0.5rem; }
.is-compact .inv-events { padding: 0.55rem 0; }
.is-compact .inv-families { padding: 0.55rem 0 0.15rem; }
.is-compact .inv-foot { min-height: 34cqi; padding-left: 30cqi; }
/* A narrow card: tighter columns, and the families one above the other so no parent's name breaks. */
/* A narrowish card: each parent's name kept to one line, a touch smaller. */
@container (max-width: 300px) {
  .inv-families { gap: 0.5rem; font-size: 0.88em; }
  .inv-families p { white-space: nowrap; }
}
@container (max-width: 260px) {
  .inv-head { width: 64%; }
  .inv-families { grid-template-columns: 1fr; gap: 0.6rem; }
  .inv-event { padding: 0 0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet.is-card, .sheet.is-card .sheet-panel { transition: none; }
}