.invite-canvas {
  --invite-accent: #946e50;
  --invite-text-color: #403735;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 5 / 7;
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #eee5dc;
  background: #fcf8f1;
  box-shadow: 0 9px 34px #1c2e3914;
  user-select: none;
  -webkit-user-select: none;
}
.invite-canvas-bg-ivory{background:linear-gradient(135deg,#fffdf7,#f7efe4 58%,#fef9f2)}
.invite-canvas-bg-blush{background:radial-gradient(ellipse at 15% 14%,#f8dbe1,transparent 65%),radial-gradient(ellipse at 90% 90%,#ebc6d1,transparent 60%),#fff9f6}
.invite-canvas-bg-sage{background:radial-gradient(ellipse at 12% 3%,#c6d6c5,transparent 68%),linear-gradient(160deg,#fbfff8,#e5efdf)}
.invite-canvas-bg-champagne{background:radial-gradient(ellipse at 90% 0,#efd7a6,transparent 60%),radial-gradient(ellipse at 0 100%,#ddbe8a,transparent 65%),#fcf6e9}
.invite-canvas-bg-midnight{background:radial-gradient(ellipse at 20% 0,#283f62,transparent 74%),linear-gradient(130deg,#101e35,#1c3240)}
.invite-canvas-bg-parchment{background:repeating-linear-gradient(120deg,#f9efdc,#f9efdc 4px,#f7ecd9 5px,#f8eedc 9px)}
.invite-canvas-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.invite-canvas-frame{position:absolute;inset:4.5%;z-index:1;border:1px solid var(--invite-accent);opacity:.30;pointer-events:none}
.invite-canvas-frame::after{content:'';position:absolute;inset:1.2%;border:1px solid var(--invite-accent);opacity:.35}
.invite-canvas-item{
  position:absolute;z-index:2;max-width:94%;
  transform:translate(-50%,-50%) rotate(var(--canvas-rotation,0deg));
  transform-origin:center;overflow-wrap:anywhere;text-align:center;
}
.invite-canvas-text{width:max-content;line-height:1.25;white-space:pre-wrap;padding:0 2px}
.invite-canvas-serif{font-family:Georgia,'Times New Roman',serif;font-weight:500}
.invite-canvas-sans{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.025em}
.invite-canvas-field-title{font-weight:600;line-height:1.12}
.invite-canvas-field-headline{font-style:italic}
.invite-canvas-field-date,.invite-canvas-field-location{font-weight:600}
.invite-canvas-clipart{aspect-ratio:1;display:grid;place-items:center;opacity:.92}
.invite-canvas-clipart svg{width:100%;height:100%;display:block;pointer-events:none}
/* Loaded by BOTH the workshop and public RSVP page: uploaded PNGs must be bounded. */
.invite-canvas-clipart img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.invite-canvas,.invite-canvas *{box-sizing:border-box}

.invite-canvas-guest{position:absolute;left:50%;bottom:1.7%;transform:translateX(-50%);text-align:center;color:var(--invite-text-color);font-size:2.3cqw;z-index:3;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.invite-canvas-bg-midnight .invite-canvas-frame{opacity:.65}
.invitation-live .invite-canvas{max-width:530px;margin:0 auto}
.invitation-live .invite-canvas-item{pointer-events:auto}
.invitation-live.invite-canvas-editing .invite-canvas-item{cursor:grab;touch-action:none}
.invitation-live.invite-canvas-editing .invite-canvas-item:active{cursor:grabbing}
.invitation-live.invite-canvas-editing .invite-canvas-item.is-selected{
  outline:2px dashed #1d8b73;outline-offset:4px;background:#e5f4ef18;
}
.rsvp-card .invite-canvas{border-radius:0;margin:0 auto;width:100%;max-width:none;box-shadow:none}
@media(max-width:800px){.rsvp-card .invite-canvas{margin:0 auto;width:100%}}
.invite-canvas-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.invite-canvas-toolbar .btn{font-size:12px;min-height:38px}
.invite-canvas-art-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:12px 0}
.invite-canvas-art-button{border:1px solid #dce5e3;border-radius:10px;padding:6px 2px;background:white;color:#98705d;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;min-width:0}
.invite-canvas-art-button:hover{border-color:#1d8b73;background:#eff9f4}
.invite-canvas-art-button svg{width:38px;height:38px}
.invite-canvas-art-button span{font-size:10px;overflow-wrap:anywhere;text-align:center}
.invite-canvas-inspector{border:1px solid #dce5e3;border-radius:12px;padding:12px;margin-top:12px;background:#f9fcfa;display:grid;gap:11px}
.invite-canvas-inspector .field{min-width:0}
.invite-canvas-inspector .field input,.invite-canvas-inspector .field select,.invite-canvas-inspector .field textarea{width:100%;max-width:100%;min-width:0}
.invite-canvas-inspector-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.invite-canvas-edit-help{font-size:11px;color:#55716f;line-height:1.6}
.invite-canvas-background{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.invite-canvas-background button{border:1px solid #dce5e3;border-radius:8px;min-width:0;background:white;padding:9px 3px;font-size:11px;font-weight:650;white-space:normal}
.invite-canvas-background button.active{border:2px solid #268775;background:#e9f7f2;color:#176653}
.invite-canvas-form-fields{display:grid;gap:11px;margin-top:12px}
.invite-canvas-form-fields .field{min-width:0}
.invite-canvas-form-fields input,.invite-canvas-form-fields textarea{max-width:100%;width:100%;min-width:0}
.invite-canvas-layer-label{font-size:12px;font-weight:800;margin:16px 0 7px;color:#264c56}
.invite-canvas-empty{padding:12px;border:1px dashed #c9dadc;border-radius:9px;font-size:12px;color:#6e8388}
.invite-canvas-layers{display:flex;flex-wrap:wrap;gap:6px}
.invite-canvas-layers .btn{font-size:11px;padding:7px;min-height:34px;white-space:normal}
.invite-canvas-layers .btn.is-active{border-color:#247966;background:#eaf7f2}
.invite-canvas-preview-only{margin-bottom:13px;color:#6b7777;font-size:12px}
@media(max-width:520px){
  .invite-canvas-art-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .invite-canvas-inspector-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invite-canvas-background{grid-template-columns:repeat(3,minmax(0,1fr))}
  .invite-canvas-inspector{padding:10px}
  .invite-canvas-item{max-width:94%}
}
.invite-mode-switch{grid-template-columns:repeat(3,minmax(0,1fr))}
.invite-mode-switch button{min-width:0;white-space:normal;font-size:12px;padding:10px 6px}
.invite-canvas-arrange-mode .invitation-live{order:0}
@media (max-width: 800px) {
  .invite-canvas-arrange-mode{display:flex!important;flex-direction:column;overflow-y:auto;}
  .invite-canvas-arrange-mode .invitation-live{order:0;flex:0 0 auto;overflow:visible}
  .invite-canvas-arrange-mode .invitation-design-settings{order:1}
  .invite-canvas-arrange-mode .invite-canvas-inspector{margin-bottom:20px}
}
@media (max-width: 520px) {
  .invite-mode-switch button{padding:9px 5px;font-size:11px}
  #modalRoot .invitation-designer-overlay{padding:0;overflow:hidden;align-items:stretch;}
  #modalRoot .invitation-designer{
    width:100%;max-width:100vw;height:100vh;height:100dvh;
    max-height:100vh;max-height:100dvh;border-radius:0;min-width:0;overflow:hidden;
  }
  .invitation-designer .invite-workshop-tabs{flex:0 0 auto;overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding:8px;overscroll-behavior-x:contain}
  .invitation-designer .invite-workshop-tabs button{white-space:nowrap;flex:0 0 auto;}
  #modalRoot .invitation-design-grid{flex:1 1 auto;min-height:0;min-width:0;max-width:100%;overflow-x:hidden;overflow-y:auto;}
  .invitation-designer .invitation-design-settings, .invitation-designer .invitation-live{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .invitation-designer .rsvp-builder-footer{flex:0 0 auto;max-width:100%;padding:10px 13px max(10px,env(safe-area-inset-bottom))}
  .invitation-designer .rsvp-builder-footer span{display:none}
  .invitation-designer .field input, .invitation-designer .field textarea, .invitation-designer .field select{min-width:0;max-width:100%;font-size:16px}
}

/* compact canvas workspace: prototype */

/* Editor-only guides and touch corner resizing. Never shown to RSVP guests. */
.invitation-live.invite-canvas-editing .invite-canvas{overflow:hidden}
.invitation-live.invite-canvas-editing .invite-canvas-item.is-selected{z-index:8;outline:1.6px dashed #148b73;outline-offset:3px}
.invite-canvas-guide{position:absolute;pointer-events:none;z-index:6;display:none;opacity:.42}
.invite-canvas.guide-dragging .invite-canvas-guide,.invite-canvas.invite-guides-on .invite-canvas-guide{display:block}
.invite-canvas-guide.guide-v{top:0;bottom:0;width:0;border-left:1px dashed #0a8f95}
.invite-canvas-guide.guide-h{left:0;right:0;height:0;border-top:1px dashed #0a8f95}
.invite-canvas-guide.guide-center{border-color:#e08233;opacity:.8}
.invite-resize-handle{
  position:absolute;display:block;width:14px;height:14px;box-sizing:border-box;
  background:#fff;border:2px solid #098b75;border-radius:3px;
  box-shadow:0 1px 4px #0b3e3544;z-index:15;
  touch-action:none;pointer-events:auto;
}
.invite-resize-nw{left:0;top:0;transform:translate(-65%,-65%);cursor:nwse-resize}
.invite-resize-ne{right:0;top:0;transform:translate(65%,-65%);cursor:nesw-resize}
.invite-resize-sw{left:0;bottom:0;transform:translate(-65%,65%);cursor:nesw-resize}
.invite-resize-se{right:0;bottom:0;transform:translate(65%,65%);cursor:nwse-resize}
.invite-canvas-item.is-selected{overflow:visible}
.invitation-live.invite-canvas-editing .invite-canvas-item{touch-action:none}
.invitation-live.invite-canvas-editing .invite-canvas-item:focus-visible{outline:2px solid #067a76}
@media(pointer:coarse){
  .invite-resize-handle{width:17px;height:17px;border-width:2.5px}
}

/* Essential for BOTH organizer preview and public guest invitation:
   uploaded image clipart must scale to the saved percentage-sized layer. */
.invite-canvas .invite-canvas-clipart img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.invite-canvas .invite-canvas-item {
  box-sizing:border-box;
}