/* Picture Format (js/picture-format.js): dialogs, the crop stage, the picture styles gallery. */
.upf-dialog { width: min(560px, 94vw); max-height: 92vh; margin: auto; padding: 0; border: 0; border-radius: var(--ui-r-sheet, 12px); background: var(--ui-bg, #fff);
  box-shadow: var(--ui-sheet-shadow, 0 12px 40px rgba(0, 0, 0, .25)); font: 13px/1.45 var(--ui-sheet-font, system-ui, sans-serif); color: var(--ui-ink, #1d1d1f); }
.upf-dialog::backdrop { background: var(--ui-scrim, rgba(0, 0, 0, .32)); }
.upf-dialog form { display: flex; flex-direction: column; max-height: 92vh; }
.upf-dialog header { display: flex; align-items: center; min-height: 48px; padding: 0 20px; flex: none; }
.upf-dialog h2 { margin: 0; font-size: 15px; font-weight: 600; }
.upf-dialog label { display: flex; flex-direction: column; gap: 4px; color: var(--ui-ink-2, #555); font-size: 12px; }
.upf-dialog label.upf-check { flex-direction: row; align-items: center; gap: 6px; color: var(--ui-ink, #1d1d1f); font-size: 13px; }
.upf-dialog select, .upf-dialog input[type="number"], .upf-dialog textarea { min-height: 30px; padding: 0 8px; border: .5px solid var(--ui-line, #c8c8cc); border-radius: 7px;
  background: var(--ui-surface, #fff); color: var(--ui-ink, #1d1d1f); font: inherit; box-sizing: border-box; }
.upf-dialog textarea { padding: 8px; resize: vertical; margin: 0 20px; }
.upf-dialog input[type="color"] { width: 44px; height: 28px; padding: 0; border: .5px solid var(--ui-line, #c8c8cc); border-radius: 6px; background: none; }
.upf-dialog input[type="range"] { width: 100%; }
.upf-dialog output { color: var(--ui-ink, #1d1d1f); font-variant-numeric: tabular-nums; }
.upf-dialog fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 10px 20px 0; padding: 8px 12px 12px; border: .5px solid var(--ui-line, #c8c8cc); border-radius: 9px; }
.upf-dialog legend { padding: 0 4px; color: var(--ui-ink-2, #555); font-size: 12px; }
.upf-dialog .upf-note { margin: 0 20px 10px; color: var(--ui-ink-2, #555); }
.upf-dialog .upf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 20px 0; }
.upf-dialog .upf-row label { min-width: 72px; }
.upf-dialog .upf-crop-numbers input { width: 72px; }
.upf-dialog .upf-sections { overflow: auto; padding-bottom: 2px; }
.upf-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 16px; flex: none; }
.upf-dialog footer button, .upf-dialog .upf-row button { height: 32px; padding: 0 18px; border: .5px solid var(--ui-line, #c8c8cc); border-radius: 8px; background: var(--ui-bg, #fff); color: var(--ui-ink, #1d1d1f); font: inherit; }
.upf-dialog footer .upf-reset { margin-right: auto; }
.upf-dialog footer .upf-primary { border-color: transparent; background: var(--ui-accent, #007aff); color: var(--ui-accent-ink, #fff); }
.upf-crop-dialog { width: min(760px, 96vw); }
.upf-format-dialog { width: min(620px, 96vw); }

/* The crop stage: the whole picture, the kept area bright, the cut area dimmed. */
.upf-crop-stage { position: relative; display: flex; align-items: center; justify-content: center; height: min(52vh, 440px); margin: 0 20px; overflow: hidden;
  border-radius: 8px; background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 16px 16px; user-select: none; }
.upf-crop-src { max-width: 100%; max-height: 100%; display: block; pointer-events: none; }
.upf-crop-box { position: absolute; box-sizing: border-box; border: 1.5px solid #fff; outline: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
  cursor: move; touch-action: none; }
.upf-crop-box:focus-visible { outline: 2px solid var(--ui-accent, #007aff); }
.upf-h { position: absolute; width: 12px; height: 12px; margin: -7px 0 0 -7px; border: 1.5px solid #fff; border-radius: 2px; background: #1d1d1f; box-sizing: border-box; }
.upf-h-nw { left: 0; top: 0; cursor: nwse-resize; } .upf-h-n { left: 50%; top: 0; cursor: ns-resize; } .upf-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.upf-h-e { left: 100%; top: 50%; cursor: ew-resize; } .upf-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .upf-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.upf-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .upf-h-w { left: 0; top: 50%; cursor: ew-resize; }

.upf-bg-stage { display: flex; justify-content: center; margin: 0 20px 10px; max-height: 46vh; overflow: auto; border-radius: 8px;
  background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.upf-bg-stage canvas { max-width: 100%; max-height: 46vh; object-fit: contain; }
.upf-bg-dialog > form > label { margin: 0 20px; }

/* A formatted floating picture shows its shadow, glow, outline and reflection outside its box. */
.udoc-textbox.tbox-obj .tbox-content:has(> img[data-pf]) { overflow: visible; }

/* Picture styles gallery tiles (UI packs). */
:where(#ui-pack-chrome) .uip-gallery-pictureStyles .uip-tile { width: 58px; }
:where(#ui-pack-chrome) .uip-gallery-pictureStyles .uip-tile-preview { position: relative; width: 44px; height: 30px; margin: 4px auto 2px; overflow: visible;
  background: linear-gradient(160deg, #9cc3e6 0 45%, #6e9e57 45% 70%, #c9a46b 70%); }
:where(#ui-pack-chrome) .uip-gallery-pictureStyles .uip-tile-preview i { display: none; }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="simpleWhite"] { outline: 3px solid #fff; outline-offset: -1px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .45); }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="simpleBlack"] { outline: 3px solid #000; outline-offset: -1px; }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="thickMatte"] { outline: 5px solid #262626; outline-offset: -2px; }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="doubleFrame"] { outline: 4px double #000; outline-offset: -2px; }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="dropShadow"] { box-shadow: 3px 3px 5px rgba(0, 0, 0, .55); }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="centerShadow"] { box-shadow: 0 0 7px rgba(0, 0, 0, .6); }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="softRect"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 5px, #000 calc(100% - 5px), transparent), linear-gradient(to bottom, transparent, #000 5px, #000 calc(100% - 5px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="rounded"] { border-radius: 6px; box-shadow: 2px 2px 3px rgba(0, 0, 0, .4); }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="reflectedRounded"] { border-radius: 6px; -webkit-box-reflect: below 1px linear-gradient(transparent 55%, rgba(255, 255, 255, .5)); }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="oval"] { border-radius: 50%; outline: 2px solid #fff; outline-offset: -1px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .45); }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="softOval"] { border-radius: 50%; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
:where(#ui-pack-chrome) .uip-tile-preview[data-preview="metalFrame"] { outline: 3px solid #8c8c8c; outline-offset: -1px; box-shadow: 2px 2px 3px rgba(0, 0, 0, .45); }

/* The default ribbon's picture tools. */
.rb-picture-tools select { height: 26px; max-width: 108px; }