/* Digital invitation maker (views/digital-invitation.cjs). Borders are 1px hairlines. */
#visu-tools.vt-digital-invitation .vt-in > * + * { margin-top: 16px; }
#visu-tools.vt-digital-invitation .vt-inv-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
#visu-tools.vt-digital-invitation .vt-seg-item span { min-height: 36px; padding: 6px 14px; font-size: 14px; }
#visu-tools.vt-digital-invitation .vt-inv-when { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
#visu-tools.vt-digital-invitation .vt-inv-set { margin-top: 20px !important; padding-top: 18px !important; border-top: 1px solid var(--vt-line) !important; }
#visu-tools.vt-digital-invitation .vt-inv-set > legend { float: left; width: 100%; margin-bottom: 10px; font-size: 15px; font-weight: 680; }
#visu-tools.vt-digital-invitation .vt-inv-set > legend + * { clear: both; }
#visu-tools.vt-digital-invitation .vt-inv-set > * + * { margin-top: 12px; }
#visu-tools.vt-digital-invitation .vt-inv-rsvp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#visu-tools.vt-digital-invitation .vt-inv-rsvp > :first-child { grid-column: 1 / -1; }
#visu-tools.vt-digital-invitation .vt-inv-opts { display: grid; gap: 16px; margin-top: 16px; }
#visu-tools.vt-digital-invitation .vt-inv-accent .vt-color-row { align-items: center; gap: 14px; }
#visu-tools.vt-digital-invitation .vt-inv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
#visu-tools.vt-digital-invitation .vt-inv-stage { display: grid; place-items: center; padding: 14px; border-radius: 16px; background: var(--vt-bg); border: 1px solid var(--vt-line); }
#visu-tools.vt-digital-invitation .vt-inv-stage canvas { display: block; width: 100%; max-width: 380px; height: auto; border-radius: 6px; box-shadow: 0 8px 28px rgba(10, 19, 36, .14); }
#visu-tools.vt-digital-invitation .vt-inv-stage[data-format="story"] canvas { max-width: 270px; }
#visu-tools.vt-digital-invitation .vt-inv-links { display: grid; gap: 8px; }
#visu-tools.vt-digital-invitation .vt-inv-links ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
#visu-tools.vt-digital-invitation .vt-inv-links li { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--vt-bg); font-size: 14px; }
#visu-tools.vt-digital-invitation .vt-inv-link-name { font-weight: 600; color: var(--vt-ink); }
#visu-tools.vt-digital-invitation .vt-inv-links code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--vt-muted); background: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#visu-tools.vt-digital-invitation .vt-inv-dyn { display: grid; gap: 10px; justify-items: start; }
@media (max-width: 600px) {
  #visu-tools.vt-digital-invitation .vt-inv-when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #visu-tools.vt-digital-invitation .vt-inv-when > :first-child { grid-column: 1 / -1; }
  #visu-tools.vt-digital-invitation .vt-inv-rsvp { grid-template-columns: 1fr; }
  #visu-tools.vt-digital-invitation .vt-inv-links li { grid-template-columns: minmax(0, 1fr) auto; }
  #visu-tools.vt-digital-invitation .vt-inv-links code { grid-column: 1 / -1; grid-row: 2; }
  #visu-tools.vt-digital-invitation .vt-inv-stage canvas { max-width: 300px; }
  #visu-tools.vt-digital-invitation .vt-inv-stage[data-format="story"] canvas { max-width: 230px; }
}
#visu-tools.vt-digital-invitation :is(input[type=date], input[type=time]) { width: 100% !important; min-width: 0; min-height: 46px; padding: 10px 12px !important; border-radius: 12px !important;
  border: 1px solid var(--vt-line-2) !important; background: #fff !important; color: var(--vt-ink) !important; font: inherit !important; font-size: 16px !important; line-height: 1.4 !important; box-shadow: none !important; margin: 0 !important; }
#visu-tools.vt-digital-invitation .vt-fields, #visu-tools.vt-digital-invitation .vt-inv-when, #visu-tools.vt-digital-invitation .vt-inv-rsvp { align-items: start; }
#visu-tools.vt-digital-invitation .vt-seg { min-width: 0; max-width: 100%; }
#visu-tools.vt-digital-invitation .vt-inv-top > .vt-seg { flex: 1 1 100%; }
/* Few options: on a phone they wrap, so every choice is in sight (the shared rule scrolls them sideways). */
@media (max-width: 600px) { #visu-tools.vt-digital-invitation .vt-seg-items { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; } }