/* Shared authoring workspace. Guest invitations keep their own visual identity. */
.saas-template-builder,
.builder-share-dialog {
  --builder-accent: #294e45;
  --builder-ink: #243c33;
  --builder-muted: #59675f;
  --builder-paper: #fff;
  --builder-white: #fff;
  --builder-surface: #f4f6f3;
  --builder-tint: #eaf1ed;
  --builder-border: #d9e1db;
  --builder-font: 'Inter Tight', sans-serif;
  color: var(--builder-ink);
  font-family: var(--builder-font);
}
.root:has(.saas-template-builder) > .nav {
  --bg: #fff;
  --store-accent: #294e45;
  --store-accent-hover: #193a30;
  --store-button-line: #d9e1db;
  background: #fff;
  color: #243c33;
  border-color: #d9e1db;
}
.root:has(.saas-template-builder) > .nav .nav-inner { max-width: none; padding-inline: 28px; }
.saas-template-builder .saas-builder-side { background: var(--builder-white); }
.saas-template-builder .saas-builder-preview { background: var(--builder-surface); }
.saas-template-builder .saas-template-switch { min-height: 92px; padding: 20px 24px; gap: 16px; }
.saas-template-builder .saas-template-switch strong { margin-top: 5px; font: 600 23px/1.2 var(--builder-font); letter-spacing: -.045em; }
.saas-template-builder .saas-template-switch span { font-size: 12px; line-height: 1.4; color: var(--builder-muted); }
.saas-template-builder .saas-template-switch button { padding: 10px 12px; background: var(--builder-white); color: var(--builder-accent); }
.saas-template-builder .ap-builder-intro { padding: 0 24px 16px; font-size: 13px; line-height: 1.55; }
.saas-template-builder .saas-builder-tabs { display: none; }
.saas-template-builder .builder-section-picker { display: grid; gap: 8px; margin: 0; padding: 16px 24px 20px; border-bottom: 1px solid var(--builder-border); color: var(--builder-muted); background: var(--builder-white); font: 500 13px/1.4 var(--builder-font); }
.saas-template-builder .builder-section-picker select { width: 100%; padding: 11px 38px 11px 13px; border-radius: 9px; }

/* Native dropdowns retain keyboard navigation and the mobile system picker. */
.saas-template-builder select,
.saas-template-builder :is(.builder-section-picker, .builder-field, .template-section-choice, .ap-builder-devices, .music-upload-panel) select {
  appearance: none;
  min-height: 46px;
  min-width: 0;
  max-width: 100%;
  padding: 11px 38px 11px 13px;
  border: 1px solid var(--builder-border);
  border-radius: 9px;
  color: var(--builder-ink);
  background-color: var(--builder-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23294e45' stroke-width='1.6' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  font: 500 14px/1.5 var(--builder-font);
  cursor: pointer;
}
.saas-template-builder select:hover:not(:disabled) { border-color: #91a79a; }
.saas-template-builder .builder-field :is(input:where(:not([type='checkbox'], [type='file'])), textarea, select) { padding: 12px 13px; border: 1px solid var(--builder-border); border-radius: 9px; background-color: var(--builder-white); color: var(--builder-ink); font: 400 15px/1.55 var(--builder-font); }
.saas-template-builder .builder-field select { padding-right: 38px; }
.saas-template-builder .builder-field :is(input, textarea)::placeholder { color: var(--builder-muted); opacity: 1; }
.saas-template-builder :is(button, select, input, textarea, summary, a):focus-visible { outline: 3px solid #6b9786; outline-offset: 3px; }
.saas-template-builder .builder-field :is(input, textarea, select):focus { border-color: var(--builder-accent); box-shadow: 0 0 0 3px var(--builder-tint); }
.saas-template-builder :is(.builder-field > span, .builder-photo-field > label) { font: 500 14px/1.45 var(--builder-font); color: var(--builder-ink); }
.saas-template-builder .builder-fields { gap: 20px; }
.saas-template-builder :is(.builder-panel-title h3, .ap-builder-story-section > h3) { margin: 0; font: 600 23px/1.25 var(--builder-font); letter-spacing: -.035em; color: var(--builder-ink); }
.saas-template-builder .builder-panel-title { padding-bottom: 0; border: 0; }
.saas-template-builder .builder-panel-title > span { background: var(--builder-tint); color: var(--builder-accent); font-size: 13px; }
.saas-template-builder :is(.builder-panel > p, .ap-builder-story-section > p, .ap-builder-quiet-note) { margin-top: 10px; font: 400 14px/1.6 var(--builder-font); color: var(--builder-muted); }
.saas-template-builder :is(.ap-builder-upload-note, .ap-builder-field small, .music-upload-hint) { color: var(--builder-muted); font-size: 12px; line-height: 1.6; }
.saas-template-builder .ap-builder-step { margin-bottom: 12px; font-size: 12px; }
.saas-template-builder .ap-builder-section-tools { gap: 10px; margin: 18px 0 8px; }
.saas-template-builder .ap-builder-example-hint { font-size: 12px; line-height: 1.6; margin-bottom: 20px; }

/* One action hierarchy throughout the editor; no hover movement. */
.saas-template-builder :is(.btn, .saas-template-switch button, .saas-builder-actions button, .builder-progress-buttons button, .builder-photo-controls button, .builder-photo-disclosure-body button, .builder-repeat button, .builder-add-btn, .music-upload-actions button, .keepsake-editor-item-heading button, .ap-builder-upload) {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--builder-border);
  border-radius: 9px;
  color: var(--builder-accent);
  background: var(--builder-white);
  box-shadow: none;
  font: 500 14px/1.45 var(--builder-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transform: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.saas-template-builder :is(.btn, .saas-template-switch button, .saas-builder-actions button, .builder-progress-buttons button, .builder-photo-controls button, .builder-photo-disclosure-body button, .builder-repeat button, .builder-add-btn, .music-upload-actions button, .keepsake-editor-item-heading button):hover:not(:disabled) { color: var(--builder-accent); background: var(--builder-tint); border-color: #9cb1a6; transform: none; box-shadow: none; }
.saas-template-builder :is(.btn-primary, .saas-builder-actions button.publish, .saas-publish-bar button, .builder-progress-buttons .builder-next-section) { background: var(--builder-accent); color: var(--builder-white); border-color: var(--builder-accent); }
.saas-template-builder :is(.btn-primary, .saas-builder-actions button.publish, .saas-publish-bar button, .builder-progress-buttons .builder-next-section):hover:not(:disabled) { background: #193a30; color: var(--builder-white); border-color: #193a30; }
.saas-template-builder :is(button, select, input, textarea):disabled { opacity: .55; cursor: not-allowed; }
.saas-template-builder .ap-builder-upload:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.saas-template-builder .builder-add-btn { border-style: solid; background: var(--builder-tint); }
.saas-template-builder .builder-progress-actions { border-color: var(--builder-border); background: var(--builder-white); }
.saas-template-builder .builder-progress-actions > p { font-size: 12px; line-height: 1.5; }
.saas-template-builder .ap-builder-savebar { padding: 14px 24px 18px; border-color: var(--builder-border); box-shadow: 0 -6px 22px #243c3305; }
.saas-template-builder .ap-builder-savebar > p { font-size: 12px; margin-bottom: 10px; }
.saas-template-builder .saas-builder-topbar { background: var(--builder-white); border-color: var(--builder-border); padding: 14px 24px; }
.saas-template-builder .builder-status-dot { background: #46765a; }
.saas-template-builder .saas-publish-bar { display: none; }

/* Photo summaries stay compact even in a 20-photo collection. */
.saas-template-builder .builder-photo-disclosure { min-width: 0; padding: 0; border: 1px solid var(--builder-border); border-radius: 10px; background: var(--builder-white); overflow: clip; }
.saas-template-builder .builder-photo-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; list-style: none; cursor: pointer; }
.saas-template-builder .builder-photo-disclosure > summary::-webkit-details-marker { display: none; }
.saas-template-builder .builder-photo-disclosure > summary::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; margin: 0 4px 4px auto; border-right: 1.5px solid var(--builder-accent); border-bottom: 1.5px solid var(--builder-accent); transform: rotate(45deg); }
.saas-template-builder .builder-photo-disclosure[open] > summary { background: var(--builder-surface); border-bottom: 1px solid var(--builder-border); }
.saas-template-builder .builder-photo-disclosure[open] > summary::after { transform: rotate(225deg); margin-top: 8px; }
.saas-template-builder .builder-photo-summary-thumb { flex: 0 0 48px; width: 48px; height: 52px; display: grid; place-items: center; object-fit: cover; border: 1px solid var(--builder-border); border-radius: 6px; background: var(--builder-tint); color: var(--builder-muted); }
.saas-template-builder .builder-photo-summary-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.saas-template-builder .builder-photo-summary-text { display: grid; gap: 4px; min-width: 0; }
.saas-template-builder .builder-photo-summary-text strong { font: 500 14px/1.4 var(--builder-font); color: var(--builder-ink); }
.saas-template-builder .builder-photo-summary-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; color: var(--builder-muted); font: 400 12px/1.5 var(--builder-font); }
.saas-template-builder .builder-photo-disclosure-body { display: grid; gap: 16px; padding: 16px; }
.saas-template-builder .builder-photo-disclosure-body .builder-photo-field { margin: 0; }
.saas-template-builder .builder-photo-disclosure-body .builder-field { min-width: 0; }
.saas-template-builder .builder-photo-link { min-width: 0; margin-top: 4px; }
.saas-template-builder .builder-photo-link > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; color: var(--builder-muted); font: 500 13px/1.5 var(--builder-font); list-style: none; cursor: pointer; }
.saas-template-builder .builder-photo-link > summary::-webkit-details-marker { display: none; }
.saas-template-builder .builder-photo-link > summary::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; margin: 0 4px 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.saas-template-builder .builder-photo-link[open] > summary::after { transform: rotate(225deg); margin-top: 8px; }
.saas-template-builder .builder-photo-link > label { display: block; margin: 4px 0 8px; font-size: 13px; }
.saas-template-builder .builder-photo-link input { width: 100%; box-sizing: border-box; }
.saas-template-builder .builder-repeat { border-color: var(--builder-border); border-radius: 10px; }
.saas-template-builder .builder-upload-placeholder { border-color: var(--builder-border); color: var(--builder-muted); background: var(--builder-surface); }
.saas-template-builder .ap-builder-secondary { padding: 0; border-radius: 10px; overflow: clip; }
.saas-template-builder .ap-builder-secondary > summary { padding: 16px; font-size: 14px; color: var(--builder-ink); }
.saas-template-builder .ap-builder-secondary > summary small { padding-left: 0; font-size: 12px; }
.saas-template-builder .ap-builder-secondary > :not(summary) { margin-inline: 16px; }
.saas-template-builder .ap-builder-secondary > .builder-fields { margin-bottom: 18px; }
.saas-template-builder .ap-builder-memories { gap: 12px; }
.saas-template-builder .ap-builder-memories > h4 { margin: 0; font: 600 16px/1.4 var(--builder-font); }
.saas-template-builder .ap-builder-quiet-note { margin: 0; padding: 0; border: 0; font-size: 13px !important; line-height: 1.6; }
.saas-template-builder :is(.builder-photo-disclosure, .ap-builder-photo-editor, .ap-builder-secondary) > summary:focus-visible { outline-offset: -4px; }
.saas-template-builder .music-upload-panel { --text-muted: var(--builder-muted); --border: var(--builder-border); --paper: var(--builder-white); --rose-pale: var(--builder-tint); --accent: var(--builder-accent); }
.saas-template-builder .keepsake-editor-item-heading h4 { color: var(--builder-ink); font: 500 17px/1.4 var(--builder-font); }

/* The invitation itself is the visual focus of the preview workspace. */
.saas-template-builder .ap-builder-preview { padding: 24px clamp(24px, 4vw, 64px); }
.saas-template-builder .ap-builder-preview-toolbar { margin-bottom: 20px; gap: 20px; }
.saas-template-builder .ap-builder-preview-toolbar strong { color: var(--builder-ink); font: 600 20px/1.3 var(--builder-font); letter-spacing: -.025em; }
.saas-template-builder .ap-builder-preview-eyebrow { color: var(--builder-muted); font-size: 12px; }
.saas-template-builder .ap-builder-devices { border: 0; padding: 0; border-radius: 0; display: grid; gap: 5px; flex-shrink: 0; font-size: 12px; color: var(--builder-muted); }
.saas-template-builder .ap-builder-devices select { min-width: 126px; }
.saas-template-builder .ap-builder-preview-stage { border-color: var(--builder-white); box-shadow: 0 12px 36px #243c3310, 0 0 0 1px var(--builder-border); }
.saas-template-builder .ap-builder-preview-footer { padding-top: 18px; gap: 10px; }
.saas-template-builder .ap-builder-preview-footer small { font-size: 12px; }
.saas-template-builder .ap-builder-preview-footer p { color: var(--builder-muted); font-size: 13px; }
.saas-template-builder .builder-preview-sheet { border-color: var(--builder-border); background: var(--builder-white); }
.saas-template-builder .builder-preview-sheet-header { background: var(--builder-white); border-color: var(--builder-border); }
.saas-template-builder .builder-preview-sheet-body { background: var(--builder-surface); }
.saas-template-builder .builder-preview-sheet-heading h2 { color: var(--builder-ink); font: 600 21px/1.3 var(--builder-font); letter-spacing: -.025em; }
.saas-template-builder .builder-preview-sheet-toolbar button { border-color: var(--builder-border); border-radius: 9px; color: var(--builder-accent); background: var(--builder-white); font: 500 14px/1.4 var(--builder-font); }
.saas-template-builder .builder-preview-sheet-toolbar button:focus-visible { outline-color: #6b9786; }

@media (min-width: 821px) {
  .saas-template-builder:not(.is-previewing) { grid-template-columns: minmax(360px, min(38vw, 520px)) minmax(0, 1fr); }
  .saas-template-builder .saas-builder-form { padding: 24px 24px 32px; scrollbar-width: thin; scrollbar-color: #c0cec5 transparent; scrollbar-gutter: stable; }
  .saas-template-builder .builder-progress-actions { padding: 14px 24px 18px; }
  .saas-template-builder .ap-builder-preview-stage { height: clamp(400px, calc(100dvh - 315px), 800px); }
}
@media (max-width: 820px) {
  .saas-template-builder .saas-template-switch { min-height: 90px; padding: 18px 20px; }
  .saas-template-builder .saas-template-switch strong { font-size: 22px; }
  .saas-template-builder:not(.is-previewing) .saas-template-switch button { min-height: 44px !important; }
  .saas-template-builder .ap-builder-intro { padding: 0 20px 14px; }
  .saas-template-builder .builder-section-picker { padding: 14px 20px 18px; }
  .saas-template-builder:not(.is-previewing) .saas-builder-form { padding: 20px 16px 28px !important; }
  .saas-template-builder .builder-panel { padding: 0; }
  .saas-template-builder :is(select, .builder-field input:not([type='checkbox']), .builder-field textarea, .builder-field select) { font-size: 16px; }
  .saas-template-builder .saas-builder-topbar { background: var(--builder-white); border-color: var(--builder-border); }
  .saas-template-builder .ap-builder-savebar { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .saas-template-builder .ap-builder-savebar .btn { min-height: 48px; font-size: 14px; }
  .saas-template-builder .builder-progress-actions { padding-inline: 0; }
  .saas-template-builder .builder-photo-disclosure > summary { gap: 10px; padding: 12px; }
  .saas-template-builder .builder-photo-disclosure-body { padding: 14px; }
  .saas-template-builder .ap-builder-secondary > summary { min-height: 48px; }
}
@media (forced-colors: active) {
  .saas-template-builder select,
  .saas-template-builder :is(.builder-section-picker, .builder-field, .template-section-choice, .ap-builder-devices, .music-upload-panel) select { appearance: auto; background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .saas-template-builder * { transition: none !important; scroll-behavior: auto !important; }
}