/* Shared component grammar. The invitation illustrations keep their own geometry. */
:root { --control-radius:12px; --surface-radius:20px; --control-line:#dedbd5; --control-ink:#38342f; --support-ink:#766f68; --control-height:44px; }
body .btn { border-radius:var(--control-radius); min-height:var(--control-height); font-weight:500; font-size:14px; padding:9px 14px; box-shadow:none; }
body .btn-soft { border:1px solid var(--control-line); background:#fffefd; color:var(--control-ink); }
body .btn-text { background:transparent; border:1px solid transparent; color:var(--support-ink); box-shadow:none; }
body .btn:disabled { opacity:.65; cursor:default; transform:none; }
body .btn:disabled:hover { transform:none; }
body label { font-weight:400; }
#accountView input,.modal-card input,.modal-card textarea,.guest-response input,.guest-response textarea,.guest-response select { border:1px solid var(--control-line); border-radius:var(--control-radius); font-size:16px; font-weight:400; padding:9px 11px; background:#fffefd; }
.field-error { display:block; color:#a44336; font:400 12px/1.45 Onest,system-ui,sans-serif; margin-top:2px; }
input[aria-invalid="true"],textarea[aria-invalid="true"] { border-color:#a44336 !important; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; clip-path:inset(50%); overflow:hidden; white-space:nowrap; border:0 !important; }
body.editor-mini-mode .footer { display:none; }
#editorView .editor-mini-head { grid-template-columns:44px minmax(0,1fr); gap:12px; margin-bottom:12px; }
#editorView .editor-title-pill { text-align:left; min-width:0; }
#editorView .editor-title-pill h1 { font-size:16px; font-weight:500; line-height:1.3; letter-spacing:-.02em; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#editorView .editor-title-pill p { font-size:11px; line-height:1.4; margin:0; color:var(--support-ink); min-height:16px; }
#editorSaveStatus[data-state="saved"] { color:#ad5b45 !important; }
#editorSaveStatus[data-state="error"] { color:#a44336 !important; }
#editorView .compact-editor-card { padding:16px; border-radius:var(--surface-radius); }
#editorView .mini-step-progress,#editorView .editor-app-shell[data-step="style"] .mini-step-progress { margin-bottom:18px; }
#editorView .compact-step-dots { padding:0; gap:0; border-radius:0; border-bottom:1px solid var(--ui-line); background:none; }
#editorView .editor-step-pill { position:relative; flex-direction:row; gap:5px; min-height:44px; border-radius:0; padding:8px 0; background:none; box-shadow:none; color:#81786d; }
#editorView .editor-step-pill b { font-size:12px; font-weight:400; }
#editorView .editor-step-pill .step-number { font-size:10px; font-weight:400; opacity:.7; }
#editorView .editor-step-pill.active { color:var(--control-ink); background:none; box-shadow:none; }
#editorView .editor-step-pill.active b { font-weight:500; }
#editorView .editor-step-pill.active::after { content:''; position:absolute; bottom:-1px; left:10px; right:10px; height:2px; border-radius:2px; background:var(--primary); }
#editorView .editor-sticky-bar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:8px; border:1px solid var(--ui-line); border-radius:16px; background:#fffefd; padding:6px; box-shadow:0 4px 18px #51453210; }
#editorView .preview-button { display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; padding-inline:4px; }
.preview-button svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; }
#editorView .editor-sticky-bar .editor-next-button { font-weight:500; font-size:13px; }
body.editor-keyboard-open .editor-sticky-bar { visibility:hidden; pointer-events:none; }
#editorView input,#editorView textarea { scroll-margin-block:90px; }
#editorView .form-section { gap:10px; }
#editorView .form-section h3 { font-size:15px; font-weight:500; }
#editorView .optional-fields { grid-column:1/-1; border:0; background:none; min-width:0; }
#editorView .optional-fields > summary { display:flex; align-items:center; gap:6px; cursor:pointer; min-height:44px; list-style:none; font-size:12px; font-weight:400; color:#635c54; }
#editorView .optional-fields > summary::-webkit-details-marker { display:none; }
#editorView .optional-fields > summary::before { content:'+'; display:inline-grid; place-items:center; width:18px; height:18px; font-size:16px; font-weight:300; }
#editorView .optional-fields[open] > summary::before { content:'−'; }
#editorView .optional-fields > summary span { font-size:11px; font-style:italic; font-weight:300; color:var(--support-ink); margin-left:auto; }
#editorView .optional-fields-content { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:2px 0 8px; }
.editor-save-error { margin:0 0 14px; padding:10px 12px; color:#8a4338; background:#fcf0ec; border:1px solid #eaccc4; border-radius:12px; font-size:13px; line-height:1.45; }
.editor-save-error[hidden] { display:none; }
#editorView .gift-form-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#editorView .gift-form-heading h3 { margin:0; font-size:17px; font-weight:500; }
#editorView .owner-guests-link { margin-top:12px; }
/* A separate top-layer view leaves the live form and its scroll position intact. */
dialog.invitation-preview { box-sizing:border-box; position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; color:var(--control-ink); background:#faf9f6; overflow:auto; overscroll-behavior:contain; }
.invitation-preview::backdrop { background:#faf9f6; }
.preview-toolbar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(10px + var(--app-safe-top, env(safe-area-inset-top))) 16px 10px; background:#faf9f6; border-bottom:1px solid var(--ui-line); }
.preview-toolbar h2 { font-size:16px; font-weight:500; line-height:1.3; margin:0; }
.preview-toolbar p { font-size:11px; color:var(--support-ink); margin:3px 0 0; }
.preview-toolbar .btn { font-size:12px; padding:8px 10px; }
.preview-content { max-width:900px; margin:0 auto; padding:20px 16px calc(24px + var(--app-safe-bottom, env(safe-area-inset-bottom))); }
.preview-content .guest-layout { margin:0; align-items:start; }
.preview-content .guest-side { padding:10px; box-shadow:none; border-radius:24px; }
.preview-content .guest-layout > section:has(.guest-gifts:empty) { display:none; }
.preview-content .guest-layout:has(.guest-gifts:empty) { grid-template-columns:minmax(0,480px); justify-content:center; }
.preview-note { max-width:46ch; font-size:12px; line-height:1.5; color:var(--support-ink); margin:20px auto 0; text-align:center; }
@media(max-width:700px) { #editorView .compact-editor-card { padding:12px; }#editorView .editor-step-pill b { font-size:11px; }.preview-content .guest-layout { grid-template-columns:minmax(0,1fr); }.preview-content { padding:12px 12px 24px; }.preview-toolbar { gap:8px; padding-inline:12px; } }
@media(hover:hover) and (pointer:fine) { body .btn-text:hover { background:#f0ede7; } }
@media(prefers-reduced-motion:no-preference) {
 html:not(.keyboard-input) #editorBody { animation:editor-body-in 140ms ease-out; }
 html:not(.keyboard-input) .invitation-preview[open] .preview-content { animation:editor-body-in 160ms ease-out; }
 @keyframes editor-body-in { from { opacity:.4; } to { opacity:1; } }
}
html.keyboard-input .btn,html.keyboard-input .event-menu-list { transition:none !important; animation:none !important; }
#editorView .editor-step-pill { display:flex; align-items:center; justify-content:center; }
body.editor-mini-mode #editorView .editor-title-pill { display:block; text-align:left; padding:0; }
#editorView .editor-title-pill h1,#editorView .editor-title-pill p { text-align:left; }
#editorView .template-box summary { min-height:44px; }
.loading-skeleton { display:grid; gap:10px; padding:12px 0; }
.loading-skeleton span { display:block; height:12px; width:85%; border-radius:6px; background:#eae6df; }
.loading-skeleton span:last-child { width:55%; }
#editorView .editor-title-pill h1,#editorView .editor-title-pill p { width:100%; justify-self:start; }

/* A single predictable back action, always on the right of internal screens. */
.app-back-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:80px;min-height:44px;flex-shrink:0;padding:8px 12px;border:1px solid #dedbd5;border-radius:12px;background:#fffdf9;color:#514b43;font:400 13px/1.2 Onest,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.app-back-button span{font-size:24px;line-height:1;font-weight:300}
.app-back-button:focus-visible{outline:2px solid #9c8361;outline-offset:3px}
.app-back-button:hover{background:#f0ece4}
.topbar:has(.app-back-button){position:sticky;top:var(--app-safe-top,0px);z-index:30;background:#faf8f4}
#editorView .editor-mini-head{grid-template-columns:minmax(0,1fr) auto;position:sticky;top:var(--app-safe-top,0px);z-index:30;background:#faf8f4;padding:8px 0}
#editorView .editor-mini-head .editor-title-pill{grid-column:1;grid-row:1}
#editorView .editor-mini-head .app-back-button{grid-column:2;grid-row:1}

/* Avoid an unscrolled body overflow container swallowing sticky headers. */
body:has(.app-back-button):not(.crop-page-locked){overflow-x:clip;overflow-y:visible}

/* A continuous, softly raised photo choice. The control stays mounted on change. */
#editorView .photo-question{max-width:330px;font-size:15px;line-height:1.45;font-weight:400;margin-bottom:12px}
#editorView .mode-switch{width:100%;min-height:54px;padding:4px;border:1px solid #cfc7b73d;border-radius:999px;background:linear-gradient(180deg,#e9e5dcad,#f5f2ebba);box-shadow:inset 0 1px 3px #64543c0b,0 2px 8px #66553b06;backdrop-filter:blur(8px);isolation:isolate}
#editorView .mode-switch::before{display:block;content:"";position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border:1px solid #ffffffb8;border-radius:999px;background:linear-gradient(155deg,#ffffffed,#fffdf5d9);box-shadow:0 2px 5px #5e4c3620,0 5px 13px #6a56350c,inset 0 1px 0 #fff;transform:translateX(calc(var(--mode-index,0) * 100%));transition:transform 240ms cubic-bezier(.22,1,.36,1),opacity 160ms ease}
#editorView .mode-choice,#editorView .mode-choice.active{min-height:44px;padding:8px 14px;border-radius:999px;background:transparent;box-shadow:none;transform:none;font-size:14px;font-weight:400;color:#746d61;transition:color 160ms ease}
#editorView .mode-choice.active{color:#38342f;font-weight:500}
#editorView .mode-choice:focus-visible{outline:2px solid #968363;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){#editorView .mode-switch::before,#editorView .mode-choice{transition:none}}

/* Cover the inset above an internal sticky header, including Telegram controls. */
.topbar:has(.app-back-button){isolation:isolate;background:#faf9f6}
.topbar:has(.app-back-button)::before{content:'';position:absolute;left:calc((100% - 100vw)/2);width:100vw;bottom:100%;height:calc(16px + var(--app-safe-top,env(safe-area-inset-top)));background:#faf9f6;pointer-events:none}

/* The guest preview scrolls below a separate opaque header and native safe area. */
body #invitationPreview[open]{display:flex;flex-direction:column;overflow:hidden;isolation:isolate;}
body #invitationPreview>.preview-toolbar{position:relative;top:auto;z-index:2;flex:0 0 auto;box-sizing:border-box;width:100%;background:#faf9f6;}
body #invitationPreview>.preview-scroll{position:relative;z-index:0;isolation:isolate;flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;}
body #invitationPreview>.preview-scroll:focus{outline:none;}
body #invitationPreview>.preview-scroll:focus-visible{outline:1px solid #dfdbd6;outline-offset:-1px;}