/* Product-specific creative rendering. No blank date or address rules are used. */
.template-preview {
  --design-colour: #542c3a;
  --design-font: Fraunces;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f6eee9;
  container-type: inline-size;
}

.template-preview > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.design-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.design-copy {
  position: absolute;
  z-index: 2;
  left: 13%;
  right: 13%;
  margin: 0;
  color: var(--design-colour);
  font-family: var(--design-font), Georgia, serif;
  text-align: center;
  text-align: var(--design-align, center);
  line-height: 1.12;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.template-kicker {
  font: 700 clamp(7px, 1.8cqw, 14px) / 1.25 var(--sans);
  letter-spacing: .19em;
  text-transform: uppercase;
}

.template-title {
  font: 600 clamp(20px, 6.6cqw, 56px) / .94 var(--design-font), Georgia, serif;
  letter-spacing: -.045em;
}

.template-when,
.template-time {
  font: 700 clamp(8px, 2.05cqw, 16px) / 1.25 var(--design-font), Georgia, serif;
}

.template-location {
  font: 600 clamp(8px, 1.85cqw, 15px) / 1.25 var(--design-font), Georgia, serif;
}

.template-rsvp {
  font: 700 clamp(6px, 1.55cqw, 12px) / 1.3 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Family invitation and Pumpkin Club share the playful botanical art direction. */
.template-preview--family .template-kicker,
.template-preview--pumpkin .template-kicker,
.template-preview--birthday .template-kicker,
.template-preview--tiny .template-kicker { top: 24%; }

.template-preview--family .template-title,
.template-preview--pumpkin .template-title,
.template-preview--birthday .template-title,
.template-preview--tiny .template-title {
  top: 29%;
  left: 14%;
  right: 14%;
}

.template-preview--family .template-when,
.template-preview--pumpkin .template-when,
.template-preview--birthday .template-when,
.template-preview--tiny .template-when { top: 51%; }
.template-preview--family .template-time,
.template-preview--pumpkin .template-time,
.template-preview--birthday .template-time,
.template-preview--tiny .template-time { top: 56%; }
.template-preview--family .template-location,
.template-preview--pumpkin .template-location,
.template-preview--birthday .template-location,
.template-preview--tiny .template-location { top: 75%; }
.template-preview--family .template-rsvp,
.template-preview--pumpkin .template-rsvp,
.template-preview--birthday .template-rsvp,
.template-preview--tiny .template-rsvp { top: 80%; }

/* Refined dinner variants sit in the deliberately open centre of the artwork. */
.template-preview--nocturne .template-kicker,
.template-preview--moon .template-kicker,
.template-preview--terrace .template-kicker {
  top: 23%;
  left: 18%;
  right: 18%;
  color: #6f5644;
}

.template-preview--nocturne .template-title,
.template-preview--moon .template-title,
.template-preview--terrace .template-title {
  top: 30%;
  left: 15%;
  right: 15%;
  font-size: clamp(21px, 6.1cqw, 52px);
}

.template-preview--nocturne .template-when,
.template-preview--moon .template-when,
.template-preview--terrace .template-when { top: 52%; color: #6f5644; }
.template-preview--nocturne .template-time,
.template-preview--moon .template-time,
.template-preview--terrace .template-time { top: 57%; color: #6f5644; }
.template-preview--nocturne .template-location,
.template-preview--moon .template-location,
.template-preview--terrace .template-location { top: 70%; color: #6f5644; }
.template-preview--nocturne .template-rsvp,
.template-preview--moon .template-rsvp,
.template-preview--terrace .template-rsvp { top: 76%; color: #71584a; letter-spacing: .08em; }

.template-preview--moon .design-wash {
  background: linear-gradient(180deg, rgb(41 53 89 / 3%), rgb(24 36 71 / 7%));
}

/* The After Dark creative uses a cinematic lower-third rather than form lines. */
.template-preview--afterdark .design-wash {
  background: linear-gradient(180deg, rgb(10 12 21 / 7%) 40%, rgb(10 12 21 / 52%) 100%);
}

.template-preview--afterdark .design-copy {
  color: var(--design-colour);
  text-shadow: 0 2px 15px rgb(0 0 0 / 48%);
}

.template-preview--afterdark .template-kicker { top: 53%; }
.template-preview--afterdark .template-title {
  top: 58%;
  left: 10%;
  right: 10%;
  font-size: clamp(19px, 5.1cqw, 47px);
  letter-spacing: -.03em;
}
.template-preview--afterdark .template-when { top: 70%; }
.template-preview--afterdark .template-time { top: 75%; }
.template-preview--afterdark .template-location { top: 83%; }
.template-preview--afterdark .template-rsvp { top: 88%; letter-spacing: .08em; }

/* The porch photo's own paper sign becomes a finished party detail. */
.template-preview--porch .template-kicker {
  top: 73%;
  left: 21%;
  right: 21%;
  font-size: clamp(6px, 1.45cqw, 12px);
  color: #653028;
  letter-spacing: .12em;
}

.template-preview--porch .template-title {
  top: 76%;
  left: 20%;
  right: 20%;
  font-size: clamp(16px, 4.3cqw, 39px);
  color: #653028;
}

.template-preview--porch .template-when {
  top: 82%;
  left: 22%;
  right: 22%;
  font-size: clamp(6px, 1.35cqw, 11px);
  color: #653028;
}

.template-preview--porch .template-time {
  top: 85%;
  left: 22%;
  right: 22%;
  font-size: clamp(6px, 1.25cqw, 10px);
  color: #653028;
}

.template-preview--porch .template-location,
.template-preview--porch .template-rsvp { display: none; }

/* Compact surfaces keep the art populated without becoming cluttered. */
.template-preview--catalog .template-kicker { letter-spacing: .13em; }
.template-preview--catalog .template-rsvp,
.template-preview--catalog .template-location { display: none; }
.template-preview--catalog .template-title { font-size: clamp(17px, 6.2cqw, 37px); }
.template-preview--catalog .template-when { top: 55%; }
.template-preview--catalog .template-time { top: 60%; }
.template-preview--catalog.template-preview--porch .template-kicker { top: 73%; }
.template-preview--catalog.template-preview--porch .template-title { top: 76%; }
.template-preview--catalog.template-preview--porch .template-when { top: 82%; }
.template-preview--catalog.template-preview--porch .template-time { top: 85%; }

.template-preview--thumb .template-kicker,
.template-preview--thumb .template-when,
.template-preview--thumb .template-time,
.template-preview--thumb .template-location,
.template-preview--thumb .template-rsvp { display: none; }
.template-preview--thumb .template-title { top: 42%; left: 10%; right: 10%; font-size: clamp(10px, 7cqw, 30px); }
.template-preview--thumb.template-preview--porch .template-title { top: 78%; }
.template-preview--hero .template-rsvp,
.template-preview--hero .template-location { display: none; }
.template-preview--hero .template-title { font-size: clamp(17px, 6cqw, 43px); }

.art-card .template-preview,
.product-card .product-image > .template-preview,
.invite-canvas > .template-preview,
.saved-item .template-preview,
.share-preview .share-preview-art .template-preview {
  width: 100%;
  height: 100%;
}

.product-card .product-image { overflow: hidden; }
.product-stage > .template-preview {
  width: auto;
  height: 530px;
  max-width: 100%;
  aspect-ratio: 5 / 7;
  box-shadow: 0 23px 37px rgb(78 45 54 / 18%);
}

.template-preview.is-editor .design-copy {
  pointer-events: auto;
  cursor: text;
  border: 1px solid transparent;
  padding: 4px 6px;
  outline: 0;
}

.template-preview.is-editor .design-copy:focus,
.template-preview.is-editor .design-copy.selected {
  border: 2px solid var(--mint);
  background: rgb(255 255 255 / 78%);
}

.template-preview.is-editor .template-title { min-height: 1em; }
.studio-product-name {
  font: 700 12px/1 var(--sans);
  color: var(--plum);
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-history {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-left: 4px;
  border-left: 1px solid var(--line);
}

.studio-history .studio-tool { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; }
.studio-history .svg-icon { width: 16px; height: 16px; }
.studio-toolbar [data-tool="align"] { display: inline-flex; align-items: center; gap: 5px; }
.studio-toolbar [data-tool="align"] .svg-icon { width: 16px; height: 16px; }
.saved-thumb,
.share-preview-art {
  overflow: hidden;
  display: block;
  flex: 0 0 auto;
  border-radius: 5px;
}
.saved-thumb { width: 46px; height: 58px; }
.share-preview-art { width: 50px; height: 66px; }
.share-preview > img { display: none; }

/* Compact, local-first RSVP management. */
.rsvp-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 22px 0 13px;
}
.rsvp-metrics > div {
  padding: 12px;
  border-radius: 12px;
  background: #f6f3f5;
}
.rsvp-metrics b { display: block; font: 600 24px/1 var(--serif); color: var(--plum); }
.rsvp-metrics span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }
.guest-row span { display: grid; gap: 2px; }
.guest-row small { color: var(--muted); font-size: 12px; }
.remove-rsvp {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--plum);
  background: #fff;
}
.remove-rsvp:hover { background: var(--orange-pale); color: var(--orange); }
.empty-rsvps { padding: 14px 0 2px; }
.guest-rsvp-form { display: grid; grid-template-columns: 1fr 118px; gap: 10px; margin: 17px 0 4px; }
.guest-rsvp-form .field { margin: 0; }
.guest-rsvp-form .field label { display: block; margin: 0 0 5px; color: #5b5360; font-size: 12px; font-weight: 800; }
.guest-rsvp-form input,
.guest-rsvp-form select { width: 100%; height: 42px; border: 1px solid #dcd5d2; border-radius: 9px; padding: 0 11px; background: #fff; color: var(--ink); }

/* Account state is deliberately quiet: creating and downloading never needs it. */
.space-note { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--violet-pale); color: #514060; font-size: 13px; }
.space-note b { color: var(--plum); }
.published-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin: 18px 0 4px; padding: 13px 14px; border: 1px solid #d9efdf; border-radius: 12px; background: #f4fcf7; }
.published-link b { font-size: 12px; color: #176f48; }
.published-link code { grid-column: 1 / -1; overflow: hidden; color: #4e4350; font: 12px/1.35 var(--sans); overflow-wrap: anywhere; }
.published-link .outline { grid-column: 2; grid-row: 1; padding: 8px 12px; font-size: 12px; }
.modal-note { margin: 14px 0 0 !important; font-size: 12px !important; }
.public-event .event-card { max-width: 620px; }
.public-event .guest-rsvp-form { grid-template-columns: 1fr 1fr; }
.public-event .guest-rsvp-form .field:last-child { grid-column: 1 / -1; max-width: 145px; }

@media (max-width: 520px) {
  .published-link { grid-template-columns: 1fr; }
  .published-link .outline { grid-column: 1; grid-row: auto; justify-self: start; }
  .public-event .guest-rsvp-form { grid-template-columns: 1fr; }
  .public-event .guest-rsvp-form .field:last-child { grid-column: auto; max-width: none; }
}

@media (max-width: 800px) {
  .studio { grid-template-rows: 104px 1fr; }
  .studio-toolbar {
    min-height: 104px;
    height: auto;
    flex-wrap: wrap;
    align-content: center;
    gap: 6px;
    overflow: visible;
    padding: 8px 12px;
  }
  .studio-toolbar > label { display: none; }
  .studio-toolbar select { min-width: 112px; width: 112px; }
  .studio-toolbar .header-grow { display: none; }
  .studio-toolbar .primary { margin-left: auto; padding: 10px 13px; font-size: 13px; }
  .studio-toolbar [data-tool="align"] span { display: none; }
  .studio-space { padding-top: 10px; }
  .invite-canvas { max-height: calc(100svh - 226px); }
  .studio-product-name { display: none; }
  .studio-history .studio-tool span { display: none; }
  .studio-history .studio-tool { min-width: 31px; padding: 0 5px; }
  .product-stage > .template-preview { height: 385px; }
}

@media (max-width: 520px) {
  .guest-rsvp-form { grid-template-columns: 1fr; }
  .product-stage > .template-preview { height: 325px; }
  .product-card .template-preview--catalog .template-kicker,
  .product-card .template-preview--catalog .template-when,
  .product-card .template-preview--catalog .template-time {
    display: none;
  }
  .product-card .template-preview--catalog .template-title {
    top: 42%;
    left: 8%;
    right: 8%;
    font-size: clamp(9px, 9cqw, 13px);
    line-height: .98;
  }
  .product-card .template-preview--catalog.template-preview--afterdark .template-title { top: 60%; }
  .product-card .template-preview--catalog.template-preview--porch .template-title { top: 77%; }
}

/* Creative QA owns the final placement rules. Each preview has an approved
   ratio and explicit safe slots rather than a one-size-fits-all overlay. */
.template-preview { aspect-ratio: var(--template-ratio, 5 / 7); }
.design-safe-panel {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.design-copy { z-index: 3; }

.product-card .product-image {
  height: auto;
  aspect-ratio: var(--product-ratio, 5 / 7);
  background: #f4eee9;
}
.product-card .product-image > .template-preview {
  width: 100%;
  height: 100%;
}
.product-stage > .template-preview {
  aspect-ratio: var(--template-ratio, 5 / 7);
}
.editor-qa-status {
  margin: 12px 0 0 !important;
  padding: 9px 10px;
  border-radius: 9px;
  background: #eef8f2;
  color: #176f48 !important;
  font-weight: 700;
}
.editor-qa-status[data-status="warning"] {
  background: #fff2e9;
  color: #a24f2d !important;
}

/* Internal creative quality gate: available at #qa, not part of the public nav. */
.qa-page { padding: 54px 0 84px; }
.qa-head { display: flex; align-items: end; justify-content: space-between; gap: 26px; }
.qa-head h1 { margin: 8px 0 12px; font: 600 clamp(40px, 5vw, 62px)/.98 var(--serif); letter-spacing: -2.5px; }
.qa-head .lede { margin: 0; }
.qa-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 13px;
  padding: 16px 19px;
  border-radius: 15px;
  background: #eef8f2;
  color: #176f48;
}
.qa-summary[data-status="fail"] { background: #fff0e9; color: #a24f2d; }
.qa-summary b { font: 600 20px/1 var(--serif); }
.qa-summary span { font-size: 13px; }
.qa-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; color: var(--muted); font-size: 12px; }
.qa-legend span { display: inline-flex; align-items: center; gap: 6px; }
.qa-dot { width: 8px; height: 8px; border-radius: 50%; background: #18a568; }
.qa-dot--fail { background: #dd6d3d; }
.qa-board { display: grid; gap: 18px; }
.qa-template { overflow: hidden; border: 1px solid var(--line); border-left: 5px solid #18a568; border-radius: 18px; background: #fff; }
.qa-template[data-qa-status="fail"] { border-left-color: #dd6d3d; }
.qa-template > header { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; padding: 16px 18px 13px; border-bottom: 1px solid var(--line); }
.qa-template > header span { color: #8d5a46; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.qa-template h2 { margin: 0; font: 600 22px/1 var(--serif); }
.qa-template p { grid-column: 1 / 2; margin: 0; color: var(--muted); font-size: 12px; }
.qa-template-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 9px; border-radius: 999px; background: #eef8f2; color: #176f48; font-size: 11px; }
.qa-template[data-qa-status="fail"] .qa-template-status { background: #fff0e9; color: #a24f2d; }
.qa-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; }
.qa-case { margin: 0; min-width: 0; }
.qa-case figcaption { margin-bottom: 7px; color: #665e69; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.qa-preview-frame { overflow: hidden; border: 1px solid #ebe5e2; border-radius: 9px; background: #f6f0ed; box-shadow: 0 6px 16px rgb(49 35 53 / 7%); }
.qa-preview-frame .template-preview { width: 100%; height: auto; }
.qa-case--mobile { max-width: 118px; }
.qa-case--mobile .qa-preview-frame { border-radius: 12px; padding: 4px; background: #302a34; }
.qa-case--mobile .template-preview { border-radius: 8px; }
.qa-template-notes { display: grid; gap: 4px; margin: 0; padding: 0 18px 16px; color: #176f48; font-size: 12px; }
.qa-template[data-qa-status="fail"] .qa-template-notes { color: #a24f2d; }

@media (max-width: 800px) {
  .qa-page { padding-top: 38px; }
  .qa-head { display: grid; align-items: start; }
  .qa-head .primary { justify-self: start; }
  .qa-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .product-card { display: block; }
  .product-card .product-image { height: auto; aspect-ratio: var(--product-ratio, 5 / 7); }
  .product-card .template-preview--catalog .template-kicker,
  .product-card .template-preview--catalog .template-when,
  .product-card .template-preview--catalog .template-time { display: block; }
  .qa-summary { display: grid; }
  .qa-template > header { grid-template-columns: 1fr; }
  .qa-template-status { grid-column: 1; grid-row: auto; justify-self: start; }
  .qa-cases { grid-template-columns: 1fr; }
  .qa-case--mobile { max-width: none; }
}