body[data-page="create"] { --journey-width: 1280px; }
body[data-page="create"] .app-shell { padding: 24px clamp(16px, 4vw, 45px) 48px; }
.host-editor > h1 { margin-top: 20px; }
.host-editor > .lead { margin-bottom: 25px; }
.design-picker { margin: 26px 0; }
.design-picker legend { font: 600 1.2rem 'Fraunces', Georgia, serif; }
.design-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.design-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 15px; min-width: 0; padding: 16px; border: 2px solid #dfd4df; border-radius: 18px; background: #fffdf9; cursor: pointer; }
.design-card:has(input:checked) { border-color: #b8503e; box-shadow: 0 0 0 3px #b8503e22; }
.design-card:focus-within { outline: 3px solid #83618c; outline-offset: 3px; }
.design-card input { grid-column: 1; grid-row: 1; accent-color: #b8503e; }
.design-card strong { grid-column: 2; grid-row: 1; font: 600 1.2rem 'Fraunces', Georgia, serif; }
.design-card small { grid-column: 2; grid-row: 2; color: var(--muted); }
.design-art { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: center; gap: 18px; height: 115px; align-items: center; margin-top: 12px; border-radius: 12px; background: #f3eee3; overflow: hidden; }
.design-card.classic .design-art { background: #f4eaf3; }
.design-balloon { display: block; width: 64px; height: 82px; border-radius: 50% 50% 46% 46%; position: relative; border: 1px solid; transform: rotate(-12deg); }
.design-balloon:after { content: ""; position: absolute; left: 31px; top: 79px; width: 10px; height: 25px; border-right: 1px solid #998c80; border-radius: 50%; }
.design-balloon.blue { transform: rotate(12deg); }
.design-card.bloom .pink { background: #efb8c5; border-color: #bb7f8d; }
.design-card.bloom .blue { background: #bdd2ed; border-color: #8eabc9; }
.design-card.classic .pink { background: #f2c9d8; border-color: #d598b2; }
.design-card.classic .blue { background: #c9e7f2; border-color: #9ccadb; }
/* Data entry and read-only screen previews are separate regions. */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.editor-layout > * { min-width: 0; }
#create-form { padding: 24px; border: 1px solid #dfd4df; border-radius: 18px; background: #fffdf9; }
.event-mode-picker { display: grid; gap: 12px; }
.event-mode-picker legend { margin-bottom: 14px; font: 600 1.2rem 'Fraunces', Georgia, serif; }
.names-option { margin-left: 24px; font-size: .9rem; }
.editor-fields > label, .editor-settings label, .editor-private label, .editor-date-row label { display: block; margin: 20px 0 7px; font-size: .85rem; font-weight: 600; }
.editor-fields input[type="file"] { display: block; max-width: 100%; margin: 8px 0; }
.greeting-editor { resize: vertical; min-height: 100px; }
.editor-date-row { display: grid; gap: 12px; }
.editor-date-row > * { min-width: 0; }
.editor-fields .input-field, .editor-settings .input-field { width: 100%; min-width: 0; }
.editor-private { margin-top: 28px; padding-top: 24px; border-top: 1px solid #dfd4df; scroll-margin-top: 24px; }
.editor-private h2 { font-size: 1.5rem; }
.editor-photo-slot:has(img[hidden]) { display: none; }
.editor-photo-slot img { max-width: 100%; max-height: 200px; margin-top: 16px; border-radius: 10px; object-fit: contain; }
.editor-save { margin-top: 28px; }
.editor-preview { position: sticky; top: 20px; }
.editor-preview > h2 { font-size: 1.4rem; }
.editor-prompt { text-align: center; border: 1px dashed #c9bea9; background: #fffdf7; border-radius: 12px; padding: 50px 15px; color: var(--muted); }
.editor-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 18px 0; }
.editor-nav > button { width: 48px; min-height: 44px; padding: 0; font-size: 1.4rem; }
.editor-nav > span { min-width: 75px; text-align: center; font-weight: 700; }
#editor-carousel { min-height: 490px; max-height: calc(100dvh - 220px); overflow: auto; border: 1px solid #d9cfc2; background: #fbf7ee; border-radius: 10px; touch-action: pan-y; }
.editor-js .editor-slide:not(.active) { display: none !important; }
.editor-slide { min-height: 490px; }
/* Guest screens are a read-only preview: only the carousel navigation responds. */
.editor-slide > * { pointer-events: none; }
.editor-slide .screen { max-width: 620px; margin: auto; overflow-wrap: anywhere; }
.editor-slide .screen > h2, .editor-slide .intro > h2 { font-size: clamp(2.3rem, 5vw, 3rem); line-height: 1.12; letter-spacing: -.055em; text-wrap: balance; }
.editor-slide .reveal-headline h2 { font-size: clamp(3rem, 5vw, 4.2rem); line-height: 1.1; color: #a14766; margin-top: 3px; }
.editor-slide .is-boy .reveal-headline h2 { color: #3e778c; }
.editor-slide .panel { margin-top: 24px; }
.editor-note { font-size: .72rem; font-weight: 700; color: #a25242; padding: 12px 18px; border-bottom: 1px solid #e2d7cb; }
.editor-slide .date-info { min-width: 0; }
.editor-slide .balloon-panel { margin-top: 18px; }
.editor-slide .smash-section { margin: 24px auto; }
.editor-slide .smash-button { margin: auto; }
.editor-slide fieldset:disabled { opacity: .85; }
body[data-design="classic"][data-page="create"] #editor-carousel { background: #fffaf4; }
@media (max-width: 900px) {
  .editor-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .editor-preview { position: static; }
  #editor-carousel { max-height: none; }
}
@media (max-width: 420px) {
  #create-form { padding: 16px; }
  .design-cards { gap: 8px; }
  .design-card { padding: 8px; gap: 0 6px; }
  .design-card strong { font-size: 1rem; }
  .design-card small { font-size: .65rem; }
  .design-art { height: 88px; gap: 7px; }
  .design-balloon { width: 42px; height: 56px; }
  .design-balloon:after { left: 20px; top: 54px; }
}
.editor-preview-label, .editor-preview-actions { display: none; }
/* Enhanced choices preserve the server form and its no-JavaScript fallback. */
.editor-js .event-mode-source { display: none; }
.editor-js .event-mode-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.event-mode-buttons button { min-height: 52px; padding: 14px 12px; border: 2px solid #c9bea9; border-radius: 7px; background: #fffdf7; color: #393c30; font-weight: 600; }
.event-mode-buttons button[aria-pressed="true"] { border-color: #9a4032; background: #f6e8df; color: #873d30; box-shadow: inset 0 0 0 1px #9a4032; }
.name-guessing-choice { margin-top: 12px; }
.editor-preview-notice { background: #eee9db; color: #393c30; padding: 14px 18px; border: 1px solid #c9bea9; border-radius: 7px; font-size: .875rem; }
@media(max-width:900px) {
 .editor-js[data-editor-step="details"] .editor-preview { display: none; }
 .editor-js[data-editor-step="preview"] #create-form, .editor-js[data-editor-step="preview"] > h1, .editor-js[data-editor-step="preview"] > .lead { display: none; }
 .editor-js .editor-save-label { display: none; }
 .editor-js .editor-preview-label { display: inline; }
 .editor-js .editor-preview-actions { display: grid; gap: 10px; position: sticky; bottom: 0; z-index: 5; padding: 14px 0; padding-bottom: calc(14px + env(safe-area-inset-bottom,0px)); background: var(--cream); border-top: 1px solid #c9bea9; }
 .editor-preview-actions .primary-button { width: 100%; }
}