/* One scrolling work area keeps the crop controls and save actions reachable. */
#photo-editor-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 20px;
}
#photo-editor-dialog .private-dialog-head {
  flex: none;
  margin-bottom: 14px;
  min-width: 0;
}
#photo-editor-dialog .private-dialog-head > div { min-width: 0; }
#photo-editor-dialog .private-dialog-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#photo-editor-dialog .private-dialog-head > button { flex: none; }
#photo-editor-dialog h2 { font-size: 20px; }
#photo-editor-dialog .photo-editor-layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 3px 6px 6px 0;
  gap: 18px;
  align-items: start;
}
#photo-editor-dialog .photo-editor-stage { position: static; }
#photo-editor-dialog .photo-editor-controls {
  min-height: 0;
  max-height: none;
  overflow: visible;
  align-content: start;
  padding: 4px 2px 2px;
}
#photo-editor-dialog .photo-editor-controls fieldset { min-width: 0; }
#photo-editor-dialog .photo-edit-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
#photo-editor-dialog .photo-edit-modes button { white-space: normal; line-height: 1.45; }
#photo-editor-dialog #photo-editor-canvas {
  width: min(100%, max(180px, calc((100dvh - 340px) * 1.5)));
  height: auto;
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  outline: 1px solid #cad1d8;
  cursor: grab;
}
#photo-editor-dialog #photo-editor-canvas.is-dragging { cursor: grabbing; }
#photo-editor-dialog .photo-zoom-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0 5px;
  font-size: 12px;
  color: #5b6571;
}
#photo-editor-dialog .photo-zoom-heading output { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; }
#photo-editor-dialog .photo-zoom-control { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; gap: 12px; align-items: center; }
#photo-editor-dialog .photo-zoom-control button {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 34px;
  height: 32px;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
}
#photo-editor-dialog #photo-zoom {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 26px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: ew-resize;
}
#photo-editor-dialog #photo-zoom::-webkit-slider-runnable-track { height: 5px; border-radius: 4px; background: #cdd5de; }
#photo-editor-dialog #photo-zoom::-moz-range-track { height: 5px; border-radius: 4px; background: #cdd5de; }
#photo-editor-dialog #photo-zoom::-webkit-slider-thumb { -webkit-appearance: none; width: 21px; height: 21px; margin-top: -8px; border: 1px solid #8592a1; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px #44556826; cursor: ew-resize; }
#photo-editor-dialog #photo-zoom::-moz-range-thumb { width: 19px; height: 19px; border: 1px solid #8592a1; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px #44556826; cursor: ew-resize; }
#photo-editor-dialog .photo-editor-footer { flex: none; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid #e8ebef; }
@media (max-width: 700px) {
  #photo-editor-dialog[open] { padding: 14px; max-height: calc(100dvh - 16px); }
  #photo-editor-dialog h2 { font-size: 17px; }
  #photo-editor-dialog .photo-editor-layout { grid-template-columns: minmax(0,1fr); padding-right: 3px; }
  #photo-editor-dialog .photo-editor-controls { grid-template-columns: minmax(0,1fr); }
}

/* The editor uses the same pearl-frost surface and 32px controls as the board. */
#photo-editor-dialog :is(button,select){box-sizing:border-box;appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px!important;min-height:32px!important;max-height:32px!important;padding:0 10px!important;border:1px solid var(--frost-action-line,#d9dfe4)!important;border-radius:8px!important;background:var(--frost-action-surface,linear-gradient(135deg,#ffffffed,#f3f6f9b8))!important;color:var(--frost-action-ink,#626971)!important;box-shadow:var(--frost-action-shadow,inset 0 1px 0 #fff,inset 0 -1px 0 #ffffffb8,0 2px 5px #52627510)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 12px/18px var(--font,Arial,sans-serif);text-shadow:none;white-space:nowrap;vertical-align:middle;cursor:pointer;transition:background .15s,box-shadow .15s,border-color .15s;}
#photo-editor-dialog button:not(:disabled):hover{background:linear-gradient(135deg,#fff,#f4f7fae8)!important;border-color:#bcc7d0!important;box-shadow:inset 0 1px #fff,0 3px 7px #5262751a!important;}
#photo-editor-dialog button:not(:disabled):active{background:linear-gradient(135deg,#edf1f5e8,#fffffff2)!important;box-shadow:inset 0 1px 3px #52627520,0 1px #fff!important;}
#photo-editor-dialog :is(button,select):focus-visible{outline:2px solid #8b98a6;outline-offset:3px;}
#photo-editor-dialog button:is([aria-pressed='true'],.ui-action--primary){background:linear-gradient(135deg,#fff,#e9eef3df)!important;border-color:#aebbc8!important;font-weight:600;}
#photo-editor-dialog :is(button,select):disabled{opacity:.45;cursor:not-allowed;}
#photo-editor-dialog select{display:block;appearance:auto;-webkit-appearance:auto;text-align:left;width:100%;}
#photo-editor-dialog select option{background:#fff;color:#626971;}
#photo-editor-dialog .photo-edit-modes button{font-size:11px;padding-inline:6px!important;line-height:18px;white-space:nowrap;}
#photo-editor-dialog .photo-zoom-control{grid-template-columns:32px minmax(0,1fr) 32px;}
#photo-editor-dialog .photo-zoom-control button{width:32px!important;min-width:32px!important;padding:0!important;font:400 22px/1 Arial,sans-serif;}
#photo-editor-dialog .photo-sticker-picker button{aspect-ratio:auto;width:100%;padding:0!important;}
#photo-editor-dialog .photo-sticker-picker span{flex:none;width:28px;height:28px;}

#photo-editor-dialog .photo-editor-footer{flex-wrap:wrap;justify-content:flex-end;gap:8px;}
#photo-editor-dialog [data-photo-edit-reset]{margin-right:auto;}
.private-gallery-item[data-photo-order]{position:relative;cursor:grab;border-radius:10px;transition:opacity .15s,box-shadow .15s;}
.private-gallery-item[data-photo-order]:focus-visible{outline:2px solid #8b98a6;outline-offset:3px;}
.private-gallery-item.is-dragging{opacity:.45;cursor:grabbing;}
.private-gallery-item.photo-order-target{box-shadow:0 0 0 3px #acbbc9;}
.photo-order-handle{display:inline-flex;align-items:center;height:24px;padding:0 7px;color:#69747d;font-size:12px;user-select:none;}

.private-photo-edit{display:block;position:relative;width:100%;border:0;padding:0;background:transparent;cursor:pointer;border-radius:8px;overflow:hidden;}
.private-photo-edit img{display:block;width:100%;}
.private-photo-edit>span{position:absolute;right:7px;bottom:7px;padding:4px 8px;border:1px solid #ffffffc0;border-radius:6px;background:#ffffffa8;color:#58616a;font-size:11px;backdrop-filter:blur(10px);}
.private-photo-edit:focus-visible{outline:2px solid #8b98a6;outline-offset:2px;}
.private-photo-edit:disabled{opacity:.6;cursor:wait;}
.private-slide-interval{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;color:#626971;font-size:12px;}
.private-slide-interval input{box-sizing:border-box;width:80px;height:32px;border:1px solid #d9dfe4;border-radius:8px;background:linear-gradient(135deg,#ffffffed,#f3f6f9b8);color:#626971;padding:0 9px;font:inherit;backdrop-filter:blur(10px);}

#private-dialog .private-slide-interval input{height:32px!important;min-height:32px!important;max-height:32px!important;padding-block:0!important;line-height:18px;}