/* Banaune Greetings editor V7.6: touch-safe, clean responsive layout. */
#greeting-editor{gap:20px;scroll-margin-top:85px}
#greeting-editor .editor-panel,#greeting-editor .preview-area{min-width:0;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.editor-top{gap:16px;align-items:end}
.editor-top .editor-ident{min-width:0;flex:1}
.editor-top .editor-ident h1{overflow-wrap:anywhere}
.editor-top .back-link{display:inline-flex;min-height:34px;align-items:center;flex:0 0 auto}
.editor-top .autosave-indicator{margin-left:auto}
#greeting-editor .panel-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;gap:6px;z-index:9;background:var(--surface);border-bottom:1px solid var(--line)}
#greeting-editor .panel-tabs .tab{min-width:0;min-height:44px;margin:0;border-radius:9px;font-size:13px;font-weight:750;text-align:center;white-space:nowrap}
#greeting-editor .panel-head{margin-bottom:18px}
#greeting-editor .panel-head h2{font-size:19px;margin-bottom:7px}
#greeting-editor .panel-head p{max-width:48ch;line-height:1.55}
#greeting-editor .photo-input-card{min-width:0}
#greeting-editor .photo-picker{min-width:0}
#greeting-editor .panel-scroll{min-width:0}
#greeting-editor .preview-area{padding:18px}
#greeting-editor .preview-top{padding:1px 0 15px;gap:9px;align-items:center}
#greeting-editor .preview-top strong{font-size:16px}
#greeting-editor .preview-top span{font-size:12px}
#greeting-editor .editor-drag-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:0 0 15px}
#greeting-editor .editor-layout-mode{display:flex;flex:1 1 265px;gap:10px;min-width:0;align-items:center;flex-wrap:nowrap}
#greeting-editor .editor-layout-mode p{line-height:1.45;font-size:12px;min-width:0;flex:1}
#greeting-editor .layout-edit-button{flex:0 0 auto;min-height:44px;border-radius:11px;font-size:12px;font-weight:800;min-width:124px}
#greeting-editor .layout-edit-button[aria-pressed="true"]{background:#2457e6!important;border-color:#2457e6!important;color:white!important}
#greeting-editor .editor-history{display:flex;gap:7px;width:auto;flex:0 0 auto}
#greeting-editor .editor-history .ghost-button{min-height:42px;min-width:78px;padding:9px 13px;margin:0;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--surface-alt)}
#greeting-editor .editor-history .ghost-button:disabled{opacity:.40}
#greeting-editor .canvas-stage{position:relative;touch-action:pan-y pinch-zoom!important;min-height:0;padding:12px;overflow:hidden;border-radius:12px}
#greeting-editor .canvas-stage canvas{display:block;margin:auto;max-width:100%;height:auto;min-width:0;touch-action:pan-y pinch-zoom!important;pointer-events:none!important;cursor:default!important;-webkit-user-select:none;user-select:none}
/* Enable ALL pointing and touch manipulation only after deliberate opt-in. */
#greeting-editor .canvas-stage.layout-edit-active{touch-action:manipulation!important}
#greeting-editor .canvas-stage.layout-edit-active canvas{touch-action:none!important;pointer-events:auto!important;cursor:grab!important}
#greeting-editor .canvas-stage.layout-edit-active canvas.is-dragging{cursor:grabbing!important}
#greeting-editor .text-drag-layer{display:none!important;pointer-events:none!important}
#greeting-editor .canvas-stage.layout-edit-active .text-drag-layer{display:block!important}
#greeting-editor .text-drag-handle{display:none!important;pointer-events:none!important;touch-action:pan-y pinch-zoom!important}
#greeting-editor .canvas-stage.layout-edit-active .text-drag-handle:not([hidden]){display:block!important;pointer-events:auto!important;touch-action:none!important}
#greeting-editor .editor-mini-preview{display:none!important}
#greeting-editor .preview-bottom{padding-top:14px;gap:8px;align-items:center}
#greeting-editor .preview-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:stretch;justify-content:flex-end;max-width:100%}
#greeting-editor .preview-actions .btn{font-size:12px;line-height:1.2;min-height:45px;white-space:normal;text-align:center;min-width:0;margin:0}
#greeting-editor .stage-hint{font-size:11px}
#greeting-editor .status-note{font-size:12px;line-height:1.5}
.editor-top .editor-version{display:none}
/* A single download area: legacy fixed footer is never used by the editor. */
body:has(#greeting-editor) .mobile-export-bar{display:none!important}
body:has(#greeting-editor){padding-bottom:0!important}
@media(max-width:1050px){
 #greeting-editor .preview-actions{justify-content:stretch;flex:1;width:100%}
 #greeting-editor .preview-bottom{flex-direction:column;align-items:stretch}
 #greeting-editor .preview-actions .btn{flex:1 1 28%}
 #greeting-editor .preview-size{display:none}
}
@media(max-width:900px){
 .editor-top{display:flex;flex-wrap:wrap;align-items:start;padding-block:15px 14px;gap:6px 14px}
 .editor-top .back-link{width:100%;font-size:12px}
 .editor-top .editor-ident h1{font-size:clamp(22px,5.3vw,30px);margin:4px 0}
 .editor-top .autosave-indicator{display:flex;font-size:10px;white-space:normal}
 #greeting-editor{display:flex!important;flex-direction:column;gap:12px}
 #greeting-editor .preview-area{order:1;padding:14px}
 #greeting-editor .editor-panel{order:2}
 #greeting-editor .panel-tabs{position:relative!important;top:auto!important;left:auto!important;transform:none!important}
 #greeting-editor .panel-scroll{max-height:none;min-height:0;overflow:visible;position:relative;z-index:0}
 #greeting-editor .canvas-stage canvas{max-height:57svh}
 #greeting-editor .preview-top{padding-bottom:12px}
 #greeting-editor .editor-drag-toolbar{gap:9px}
 #greeting-editor .editor-layout-mode{flex:1 1 auto}
 #greeting-editor .editor-history{flex:0 0 auto}
 #greeting-editor .editor-history .ghost-button{min-width:69px}
 #greeting-editor .edit-details-link{display:inline-flex;align-items:center;min-height:38px;margin-left:auto}
}
@media(max-width:600px){
 .editor-top .autosave-indicator{display:none}
 #greeting-editor .preview-area{padding:12px;border-radius:14px}
 #greeting-editor .preview-top{flex-wrap:wrap;align-items:center}
 #greeting-editor .preview-top strong{font-size:15px}
 #greeting-editor .preview-top span{font-size:11px;display:block}
 #greeting-editor .canvas-stage{padding:8px}
 #greeting-editor .canvas-stage canvas{max-height:56svh;width:auto}
 #greeting-editor .editor-drag-toolbar{display:grid;grid-template-columns:1fr;gap:9px;padding-bottom:12px}
 #greeting-editor .editor-layout-mode{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
 #greeting-editor .layout-edit-button{min-width:0;padding:8px 12px;font-size:12px}
 #greeting-editor .editor-layout-mode p{font-size:11px;line-height:1.4}
 #greeting-editor .editor-history{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
 #greeting-editor .editor-history .ghost-button{width:100%;min-height:42px;min-width:0}
 #greeting-editor .preview-bottom{padding-top:12px}
 #greeting-editor .preview-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);width:100%;gap:8px}
 #greeting-editor .preview-actions .btn{width:100%;padding:10px 9px;min-height:44px;flex:none}
 #greeting-editor .preview-actions>:nth-child(n+3){grid-column:1/-1}
 #greeting-editor .stage-hint{display:none}
 #greeting-editor .panel-tabs{padding:7px;gap:6px}
 #greeting-editor .panel-tabs .tab{font-size:12px;min-height:45px}
 #greeting-editor .panel-scroll{padding:16px}
 #greeting-editor .panel-head p{font-size:12px}
 #greeting-editor .status-note{margin-top:9px}
}
@media(max-width:350px){
 #greeting-editor .editor-layout-mode{grid-template-columns:1fr}
 #greeting-editor .layout-edit-button{width:100%}
 #greeting-editor .preview-actions .btn{font-size:11px}
}

/* V9 guided greeting editing without affecting existing Banaune styles */
#greeting-editor .v9-welcome{padding:14px 20px 10px;display:flex;flex-direction:column;gap:4px;background:var(--surface-alt);border-bottom:1px solid var(--line)}
#greeting-editor .v9-welcome strong{font-size:13px;color:var(--ink)}
#greeting-editor .v9-welcome span{font-size:11px;color:var(--ink-2)}
#greeting-editor .v9-quick-actions{display:flex;gap:8px;margin:0 0 13px;flex-wrap:wrap}
#greeting-editor .v9-quick-actions button{flex:1 1 auto;border:1px solid var(--line);background:var(--surface-alt);border-radius:10px;color:var(--ink);font-size:12px;font-weight:750;min-height:43px;padding:8px 12px;white-space:normal}
#greeting-editor .v9-quick-actions button:hover{border-color:var(--brand);color:var(--brand)}
#greeting-editor .v9-drag-modes{display:flex;gap:6px;flex:1 1 auto}
#greeting-editor .v9-mode-button{border:1px solid var(--line);border-radius:10px;background:var(--surface-alt);color:var(--ink-2);padding:9px 11px;min-height:40px;font-size:11px;font-weight:750}
#greeting-editor .v9-mode-button[aria-pressed=true],#greeting-editor .v9-active{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important}
#greeting-editor .v9-photo-tools{padding:11px 0 3px;margin-top:10px;border-top:1px solid var(--line);display:grid;gap:9px}
#greeting-editor .v9-mini-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#greeting-editor .v9-mini-row label,#greeting-editor .v9-text-tools label,#greeting-editor .v9-background-tools label{display:flex;flex-direction:column;align-items:stretch;gap:5px;font-size:11px;color:var(--ink-2);font-weight:700;margin:0;min-width:0}
#greeting-editor .v9-mini-row select,#greeting-editor .v9-text-tools select,#greeting-editor .v9-background-tools select{width:100%;min-width:0;min-height:35px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);padding:6px 7px;font-size:12px}
#greeting-editor .v9-photo-tools input[type=range],#greeting-editor .v9-text-tools input[type=range],#greeting-editor .v9-background-tools input[type=range]{display:block;width:100%;min-width:0;accent-color:var(--brand);cursor:pointer}
#greeting-editor .v9-button-row{display:flex;flex-wrap:wrap;gap:7px}
#greeting-editor .v9-button-row button,#greeting-editor #v9-reset-bg-settings{flex:1 1 auto;min-height:37px;padding:7px 9px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:11px;font-weight:700}
#greeting-editor .v9-text-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;background:var(--surface-alt);border-radius:10px;padding:10px;margin:9px 0 12px}
#greeting-editor .v9-text-tools label:first-child{grid-column:1/-1}
#greeting-editor .v9-background-tools{display:grid;gap:11px;margin-top:13px;padding:13px;background:var(--surface-alt);border:1px solid var(--line);border-radius:12px}
#greeting-editor .v9-background-tools h3{font-size:14px;margin:0}
#greeting-editor .v9-background-tools p{margin:0}
#greeting-editor #v9-reset-bg-settings{margin:2px 0 0}
#greeting-editor .photo-input-card:has(.v9-photo-tools){background:var(--surface-alt)}
#greeting-editor .photo-input-card .v9-photo-tools{border-color:var(--line)}
@media(max-width:900px){#greeting-editor .v9-drag-modes{order:3;flex:1 1 100%}#greeting-editor .v9-drag-modes button{flex:1}#greeting-editor .v9-quick-actions button{flex:1 1 28%}}
@media(max-width:480px){#greeting-editor .v9-quick-actions{display:grid;grid-template-columns:1fr 1fr}#greeting-editor .v9-quick-actions button:last-child{grid-column:1/-1}#greeting-editor .v9-quick-actions button{font-size:11px}#greeting-editor .v9-mini-row{grid-template-columns:1fr}#greeting-editor .v9-drag-modes button{min-height:43px;white-space:normal}#greeting-editor .v9-text-tools{grid-template-columns:1fr}#greeting-editor .v9-text-tools label:first-child{grid-column:auto}}


/* ===== v9.1: calmer, dependable layout on top of the existing Banaune theme ===== */
#greeting-editor{grid-template-columns:minmax(280px,330px) minmax(0,1fr);align-items:start;gap:20px;margin-block:0 26px}
#greeting-editor .editor-panel{min-width:0;border-radius:18px;box-shadow:var(--shadow)}
#greeting-editor .panel-tabs{gap:4px;padding:8px 10px}
#greeting-editor .panel-tabs .tab{padding:10px 6px;border-radius:10px}
#greeting-editor .panel-scroll{padding:21px 19px;max-height:min(760px,calc(100svh - 160px));min-height:350px}
#greeting-editor .panel-section:not(.active){display:none!important}
#greeting-editor .panel-section.active{display:block}
#greeting-editor .v9-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
#greeting-editor .v9-quick-actions button{min-width:0;min-height:43px;line-height:1.3;font-weight:700;white-space:normal;border-radius:11px}
#greeting-editor .preview-area{min-width:0;padding:20px;border-radius:18px}
#greeting-editor .preview-top{align-items:center;gap:8px}
#greeting-editor .preview-size{margin-left:auto;white-space:nowrap}
#greeting-editor .canvas-stage{width:100%;min-height:0;padding:16px;background-color:var(--surface-alt);border:1px solid var(--line);border-radius:13px}
#greeting-editor .canvas-stage canvas{max-width:100%;max-height:min(64svh,660px);width:auto;height:auto;object-fit:contain}
#greeting-editor .v9-drag-modes{display:none;gap:7px}
#greeting-editor.v9-layout-editing .v9-drag-modes{display:flex}
#greeting-editor .v9-mode-button{flex:1 1 auto}
#greeting-editor .editor-drag-toolbar{gap:9px;padding-bottom:12px}
#greeting-editor .editor-layout-mode{flex:1 1 260px}
#greeting-editor .editor-layout-mode p{margin:0}
#greeting-editor .v9-adjust-details{border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-top:12px;overflow:hidden}
#greeting-editor .v9-adjust-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:42px;padding:10px 12px;font-size:12px;font-weight:800;color:var(--brand);cursor:pointer;user-select:none}
#greeting-editor .v9-adjust-details summary::-webkit-details-marker{display:none}
#greeting-editor .v9-adjust-details summary:after{content:'＋';font-size:18px;font-weight:500;line-height:1}
#greeting-editor .v9-adjust-details[open] summary:after{content:'−'}
#greeting-editor .v9-adjust-details[open] summary{border-bottom:1px solid var(--line)}
#greeting-editor .v9-photo-tools{margin:0;padding:12px;border-top:0;background:var(--surface-alt)}
#greeting-editor .v9-text-tools{margin:0;padding:12px;border-radius:0;background:var(--surface-alt)}
#greeting-editor .photo-input-card{padding:14px;border-radius:13px}
#greeting-editor .photo-picker .upload-trigger{background:var(--surface);color:var(--brand);border-color:var(--line);min-height:40px;display:inline-flex;align-items:center}
#greeting-editor .photo-picker input[type=file]{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;clip-path:inset(50%)}
#greeting-editor .field-block{margin-top:17px}
#greeting-editor .panel-head{margin-bottom:14px}
#greeting-editor .panel-head p{margin-bottom:0}
#greeting-editor .preview-actions{align-items:stretch}
@media(min-width:1100px){#greeting-editor .editor-panel{position:sticky;top:86px}}
@media(max-width:900px){
  #greeting-editor{display:flex;flex-direction:column;gap:12px}
  #greeting-editor .preview-area{order:1;width:100%;padding:14px}
  #greeting-editor .editor-panel{order:2;position:static;width:100%}
  #greeting-editor .panel-scroll{max-height:none;min-height:0;overflow:visible}
  #greeting-editor .canvas-stage{padding:10px}
  #greeting-editor .canvas-stage canvas{max-height:58svh}
  #greeting-editor .preview-actions{max-width:100%}
}
@media(max-width:520px){
  #greeting-editor .preview-area{padding:12px}
  #greeting-editor .preview-top{flex-wrap:wrap}
  #greeting-editor .v9-quick-actions{gap:6px}
  #greeting-editor .v9-quick-actions button{font-size:11px;padding:8px 6px;min-height:44px}
  #greeting-editor .editor-layout-mode{flex:1 1 100%}
  #greeting-editor .editor-history{width:100%}
  #greeting-editor .canvas-stage canvas{max-height:56svh}
  #greeting-editor .preview-size{font-size:10px}
  #greeting-editor .panel-scroll{padding:16px}
  #greeting-editor .v9-mini-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  #greeting-editor .v9-drag-modes button{font-size:11px}
}
@media(max-width:350px){#greeting-editor .v9-quick-actions button{font-size:10px}}

/* V10 simple creative studio enhancements */
#greeting-editor .v10-start-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 10px}
#greeting-editor .v10-start-tools button,#greeting-editor .v10-preset-buttons button,#greeting-editor .v10-reset-text{background:var(--surface-alt);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:12px;font-weight:750;min-height:40px}
#greeting-editor .v10-start-tools button:hover,#greeting-editor .v10-preset-buttons button:hover{border-color:var(--brand);color:var(--brand)}
#greeting-editor .v10-guide-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);cursor:pointer}
#greeting-editor .v10-guide-label input{accent-color:var(--brand);width:16px;height:16px}
#greeting-editor .v10-preset-box{margin:0 0 12px;background:var(--surface-alt);border:1px solid var(--line);border-radius:11px;padding:11px 14px}
#greeting-editor .v10-preset-box summary{font-size:12px;font-weight:800;color:var(--ink);cursor:pointer;list-style-position:inside}
#greeting-editor .v10-preset-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 7px}
#greeting-editor .v10-preset-box p{margin:5px 0 0;font-size:11px}
#greeting-editor .v10-check{display:flex;gap:7px;align-items:center;justify-content:flex-start;font-size:12px}
#greeting-editor .v10-check input{width:16px;height:16px;accent-color:var(--brand)}
#greeting-editor .v9-text-tools input[type=color],#greeting-editor .v9-photo-tools input[type=color]{width:48px;min-height:34px;background:transparent;border:0}
#greeting-editor .canvas-stage.v10-show-guides::before{content:"";position:absolute;inset:10%;pointer-events:none;z-index:5;border:1px dashed rgba(36,87,230,.65)}
#greeting-editor .canvas-stage.v10-show-guides::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(to right,transparent calc(50% - .5px),rgba(36,87,230,.3) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),rgba(36,87,230,.3) 50%,transparent calc(50% + .5px))}
@media(max-width:600px){#greeting-editor .v10-start-tools{display:grid;grid-template-columns:1fr 1fr}#greeting-editor .v10-start-tools .v10-guide-label{grid-column:1/-1;justify-content:center}#greeting-editor .v10-preset-buttons{display:grid;grid-template-columns:1fr 1fr}}

/* BANAUNE_PHONE_PHOTOS_V1 — keeps mobile sharing inside the existing editor */
#greeting-editor #save-to-photos {
  border-color: var(--brand); background: var(--brand);
  color: #fff; font-weight: 800; min-height: 45px;
}
#greeting-editor #save-to-photos:hover { filter: brightness(1.08); }
#greeting-editor #save-to-photos:disabled { opacity: .6; cursor: wait; }
#greeting-editor .save-to-photos-help {
  font-size: 11px; line-height: 1.5; color: var(--muted);
  padding: 0 4px; margin: 6px 0 0;
}
.phone-image-fallback {
  width: min(520px, calc(100vw - 24px)); max-height: 92dvh; overflow: auto;
  padding: 0; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 22px 90px rgba(0,0,0,.35);
}
.phone-image-fallback::backdrop { background: rgba(7,15,30,.74); }
.phone-image-fallback-inner { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.phone-image-fallback-inner h2 { font-size: 21px; margin: 0; }
.phone-image-fallback-inner p { margin: 0; font-size: 13px; color: var(--ink-2); }
.phone-image-fallback-inner img {
  display: block; width: 100%; max-height: 55dvh; object-fit: contain;
  border-radius: 8px; background: var(--surface-alt);
  -webkit-touch-callout: default;
}
.phone-image-fallback-inner .phone-image-download { align-self: stretch; }
.phone-image-close {
  align-self: flex-end; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); background: var(--surface-alt);
  font-size: 25px; line-height: 1; width: 42px; height: 42px;
}
@media (max-width: 650px) {
  #greeting-editor .preview-actions #save-to-photos {
    grid-column: 1 / -1; width: 100%; min-height: 50px;
  }
  #greeting-editor .save-to-photos-help { display: block; }
}
@media (min-width: 651px) {
  #greeting-editor .save-to-photos-help { display: none; }
}

