/* The Photo Editor's start screen, dialogs and controls.

   The page's own <style> lays out the window itself; this sheet holds the
   parts added since the design system: the start screen, the tour, Export
   As and Export Layers, the sections of the adjustment dialog, the
   shortcut keys, and the editor's own checkboxes, lists, sliders, icon
   buttons and tooltip. Every size, corner and duration here is one of
   theme.css's tokens, and every colour one of the editor's dark palette,
   which the page sets on body.pe-app (--paper, --ink, --pe-frame and the
   rest). It is linked after the page's <style>, so where a rule here and
   one there are equally specific, this one holds, as it did when it was
   written into the page.

   The editor's chrome is set in the operating system's face, as
   Photoshop's is, not the site's: --pe-font, named once below. */
body.pe-app { --pe-font: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* The start screen, as Photoshop's Home and Photopea's are: what was open
   last, then sizes and templates to start from, then a few tasks to learn
   on. Everything is a button, in reading order, so Tab walks it; it is
   left-aligned in one column that scrolls inside the stage, so the part
   wanted first (Open) is where the eye starts and nothing is pushed off
   the top. */
.pe-home { display: block; padding: 0; text-align: left; }
.pe-home::before, .pe-home::after { content: none; }
.pe-home-in { box-sizing: border-box; display: flex; flex-direction: column; gap: 26px; max-width: 1040px; margin: 0 auto; padding: 32px 32px 40px; container-type: inline-size; }
.pe-home-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pe-home-intro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* The start screen sits on the stage's grey (--pe-frame, #535353), where the
   palette's faint and soft greys come to 2.7:1 and 4.4:1; the small print
   here is the ink itself, and its size is what keeps it second. */
.pe-home-intro span { max-width: 62ch; font-size: var(--text-xs); line-height: 1.5; color: var(--ink); }
.pe-home .pe-home-actions { justify-content: flex-start; }
.pe-home .pe-btn { min-height: 32px; }
.pe-home-h { margin: 0 0 10px; font: 600 var(--text-xs)/1.3 var(--pe-font); color: var(--ink); }
.pe-home-note { margin: 8px 0 0; font-size: var(--text-2xs); line-height: 1.45; color: var(--ink); max-width: 80ch; }
.pe-home-note[hidden] { display: none; }
/* A button that reads as a link inside a sentence. */
.pe-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pe-link:hover { text-decoration-thickness: 2px; }
.pe-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .pe-link { display: inline-block; min-height: 44px; } }
.pe-home ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Nine sizes and Custom: two even rows of five. Six templates: one row,
   then two of three, then three of two. Counted rather than left to
   auto-fill, which leaves a ragged last row at most widths. */
.pe-home-sizes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pe-home-templates { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pe-home-learn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (max-width: 820px) { .pe-home-templates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 520px) {
  .pe-home-sizes, .pe-home-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-home-learn { grid-template-columns: minmax(0, 1fr); }
  /* On a phone a size is a row: its shape small at the left, the words beside it. */
  .pe-home-sizes .pe-home-tile { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; padding: 8px; }
  .pe-home-sizes .pe-home-shape { grid-row: span 2; height: 30px; margin: 0; }
  .pe-home-sizes .pe-home-shape i { transform: scale(.55); }
}
.pe-home-tile { display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--paper-inset); color: var(--ink); font: var(--text-2xs)/1.3 var(--pe-font); text-align: left; cursor: pointer; }
.pe-home-tile:hover { border-color: var(--accent); background: var(--paper-raised); }
.pe-home-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pe-home-tile small { font-size: var(--text-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* A size is drawn as its own shape, to scale, in a box of the same height
   for every tile, so a banner reads as a banner before the words. It is
   square-cornered: it is a picture of a page, and at the scale of a
   banner, 8px high, even the smallest token corner would read as a pill. */
.pe-home-shape { display: flex; align-items: center; justify-content: center; height: 56px; margin-bottom: 6px; }
.pe-home-shape i { flex: none; display: block; box-sizing: border-box; border: 1.5px solid var(--ink-faint); border-radius: 0; background: var(--hairline); }
.pe-home-tile:hover .pe-home-shape i { border-color: var(--accent); }
.pe-home-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; margin: -4px -4px 6px; border-radius: var(--radius-sm); background: var(--pe-pasteboard, var(--paper)); overflow: hidden; }
.pe-home-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pe-home-learn .pe-home-tile { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: start; }
.pe-home-learn svg { width: 22px; height: 22px; margin-top: 1px; color: var(--accent); grid-row: span 2; }
.pe-home-learn b { font-weight: 600; }

/* The tour: one card at a time beside what it points at. */
.pe-coach { position: fixed; z-index: 95; width: min(300px, calc(100vw - 16px)); box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-md); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--accent), 0 14px 36px rgba(0,0,0,.55); font: var(--text-xs)/1.45 var(--pe-font); }
.pe-coach h2 { margin: 0 0 4px; font: 600 var(--text-sm) var(--pe-font); color: var(--ink); }
.pe-coach p { margin: 0 0 10px; color: var(--ink-soft); }
.pe-coach .pe-coach-n { margin: 0 0 4px; font-size: var(--text-2xs); color: var(--accent); }
.pe-coach-row { display: flex; justify-content: flex-end; gap: 6px; }
.pe-coach-target { outline: 2px solid var(--accent) !important; outline-offset: -2px; }

/* Recent pictures: a thumbnail each, the name under it, a discard in the corner. */
.pe-recover { display: block; width: auto; margin: 0; padding: 0; background: none; box-shadow: none; font-size: var(--text-xs); }
.pe-recent { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pe-recent li { position: relative; min-width: 0; }
.pe-recent-open { display: flex; flex-direction: column; width: 100%; padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-inset); color: var(--ink); cursor: pointer; text-align: left; font: var(--text-2xs)/1.3 var(--pe-font); }
.pe-recent-open:hover { border-color: var(--accent); }
.pe-recent-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pe-recent-open img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper); }
.pe-recent-open span { display: block; padding: 6px 8px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-recent-open small { display: block; font-size: var(--text-2xs); color: var(--ink-faint); white-space: normal; }
.pe-recent-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: var(--on-accent); font: var(--text-md)/1 var(--pe-font); cursor: pointer; }
.pe-recent-x:hover { background: rgba(0,0,0,.8); }
@media (pointer: coarse) { .pe-recent-x { width: 44px; height: 44px; font-size: var(--text-xl); } .pe-home .pe-btn { min-height: 44px; } .pe-home-tile { min-height: 44px; } }
@media (max-width: 600px) { .pe-home-in { padding: 20px 16px 28px; gap: 22px; } }
/* On a phone with no picture open, the options bar spoke for a Move Tool
   with nothing to move and took a row of the screen from the start
   screen. It is back as soon as a picture is. */
@media (max-width: 900px) { body.pe-app:has(#peEmpty:not([hidden])) .pe-optbar { display: none; } }

/* A step kept on disk rather than in memory: the same step, a shade quieter. */
.pe-history li.is-disk button[data-h] { font-style: italic; }

/* Export As, laid out as Photoshop's is: the preview on the left, the
   settings on the right; one column on a narrow screen. The preview sits
   on the pasteboard's checks, so what is transparent shows as such. */
dialog.pe-dialog.pe-xa { width: min(96vw, 940px); max-height: 94vh; max-height: 94dvh; overflow: auto; }
.pe-xa-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.pe-xa-stage { position: relative; overflow: hidden; border-radius: var(--radius-sm); cursor: ew-resize; touch-action: none;
  background: var(--pe-pasteboard) repeating-conic-gradient(var(--pe-bar) 0% 25%, var(--pe-pasteboard) 0% 50%) 0 0 / 16px 16px; box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.pe-xa-stage canvas { display: block; width: 100%; height: auto; }
.pe-xa-split { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.pe-xa-split::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M9 7l-4 4 4 4M13 7l4 4-4 4' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pe-xa-split:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-xa-split[hidden] { display: none; }
.pe-xa-tag { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: var(--radius-sm); background: rgba(0,0,0,.6); color: var(--on-accent); font: var(--text-2xs)/1.5 var(--pe-font); pointer-events: none; }
.pe-xa-tag.is-after { left: auto; right: 8px; }
.pe-xa-tag[hidden] { display: none; }
.pe-xa-under { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.pe-xa-under canvas { flex: none; width: 132px; height: 88px; border-radius: var(--radius-sm); background: var(--paper-inset); box-shadow: 0 0 0 1px var(--hairline-strong); cursor: crosshair; }
.pe-xa-zoom { display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); overflow: hidden; }
.pe-xa-zoom button { min-height: 24px; padding: 0 10px; border: 0; background: none; color: var(--ink-soft); font: var(--text-2xs) var(--pe-font); cursor: pointer; }
.pe-xa-zoom button[aria-pressed="true"] { background: var(--accent-strong); color: var(--on-accent); }
.pe-xa-size { margin: 10px 0 6px; font-size: var(--text-2xs); color: var(--ink-faint); }
.pe-xa-size b { font-size: var(--text-md); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 6px; }
.pe-xa-private { margin: 10px 0 8px; padding: 10px 10px 8px; border-radius: var(--radius-sm); background: var(--paper-inset); box-shadow: inset 0 0 0 1px var(--hairline); }
.pe-xa-private .pe-preview-note { margin-top: 6px; }
.pe-preview-note.is-warn { color: var(--danger); }
/* Export Layers and Artboards: the names the files will have. */
.pe-exf-list { list-style: none; margin: 0 0 6px; padding: 0; max-height: 180px; overflow: auto; font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1.5; }
.pe-exf-list li { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; border-bottom: 1px solid var(--hairline); }
.pe-exf-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-exf-list small { flex: none; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pe-exf-list li.more { color: var(--ink-faint); border: 0; }
/* An on and off switch, for the one choice that is a yes or a no. */
.pe-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.pe-switch input[type=checkbox][role=switch], body.pe-app .pe-switch input[type=checkbox][role=switch] { -webkit-appearance: none; appearance: none; flex: none; width: 32px; height: 18px; margin: 0; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--pe-frame) radial-gradient(circle at 9px 9px, var(--ink) 0 6.5px, transparent 7px); transition: background-color var(--dur-1) var(--ease-standard); }
.pe-switch input[type=checkbox][role=switch]:checked, body.pe-app .pe-switch input[type=checkbox][role=switch]:checked { background: var(--accent-strong) radial-gradient(circle at 23px 9px, var(--on-accent) 0 6.5px, transparent 7px); }
.pe-switch input[type=checkbox][role=switch]:disabled { opacity: .5; cursor: default; }
.pe-switch input[type=checkbox][role=switch]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .pe-xa-body { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) { .pe-xa-zoom button { min-height: 44px; min-width: 56px; } .pe-switch input[type=checkbox][role=switch] { transform: scale(1.25); } }

/* Sections in the adjustment dialog (Develop): tabs, then parts. */
.pe-adj-tabs { display: flex; gap: 2px; margin: 0 0 10px; border-bottom: 1px solid var(--hairline-strong); }
.pe-adj-tabs button { padding: 6px 10px 7px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-soft); font: var(--text-2xs) var(--pe-font); cursor: pointer; }
.pe-adj-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pe-adj-tabs button:focus-visible, .pe-adj-subs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pe-adj-subs { display: inline-flex; margin: 0 0 8px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); overflow: hidden; }
.pe-adj-subs[hidden] { display: none; }
.pe-adj-subs button { min-height: 24px; padding: 0 10px; border: 0; background: none; color: var(--ink-soft); font: var(--text-2xs) var(--pe-font); cursor: pointer; }
.pe-adj-subs button[aria-pressed="true"] { background: var(--accent-strong); color: var(--on-accent); }
.pe-adj-part[hidden], #peAdjFields .pe-field[hidden] { display: none; }
.pe-adj-nocurve #peCurvesBox, .pe-adj-nocurve #peAdjChannelWrap, .pe-adj-nocurve #peCurveInWrap, .pe-adj-nocurve #peCurveOutWrap, .pe-adj-nocurve #peCurveDragWrap { display: none !important; }
/* Colour grading: a wheel each for the shadows, midtones and highlights;
   the point's angle is the hue and its distance out the strength. */
.pe-wheels { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0 8px; }
.pe-wheel { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--text-2xs); color: var(--ink-soft); }
.pe-wheel canvas { width: 96px; height: 96px; border-radius: 50%; cursor: crosshair; touch-action: none; }
.pe-wheel canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .pe-adj-tabs button, .pe-adj-subs button { min-height: 44px; } }

/* Room on the right of a field's list for its chevron (set with the controls below). */
body.pe-app .pe-field select { padding-right: 22px; }

/* Keyboard Shortcuts: the keys beside each command are a button to change them. */
.pe-keycap { min-width: 64px; min-height: 22px; padding: 1px 8px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: var(--text-2xs) var(--pe-font); cursor: pointer; }
.pe-keycap:hover { border-color: var(--accent); }
.pe-keycap.is-capturing { border-color: var(--accent); background: var(--accent-soft); }
#peWsList button { display: flex; }

/* The editor's own controls. The browser's checkboxes, lists and
   sliders are drawn in the operating system's style, which in a dark
   window meant white boxes and blue system sliders among the greys; they
   are drawn here to match the rest, the way Photoshop and Affinity draw
   theirs. The colour panel's gradient sliders keep their own look. The
   tick and the chevron are pictures, so their colours are written into
   them: white on the accent, and --ink-soft's grey. */
body.pe-app input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 14px; height: 14px; margin: 0 6px 0 0; border: 1px solid var(--pe-frame); border-radius: var(--radius-sm); background: var(--paper); vertical-align: -3px; cursor: pointer; }
body.pe-app input[type=checkbox]:hover { border-color: var(--ink-faint); }
body.pe-app input[type=checkbox]:checked { border-color: var(--accent-strong); background: var(--accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
body.pe-app input[type=checkbox]:focus-visible, body.pe-app select:focus-visible, body.pe-app input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body.pe-app input[type=checkbox]:disabled { opacity: .4; cursor: default; }
body.pe-app select { -webkit-appearance: none; appearance: none; min-height: 22px; padding: 1px 22px 1px 7px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.8l3 3 3-3' fill='none' stroke='%23c4c4c4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 10px no-repeat; font: var(--text-2xs) var(--pe-font); cursor: pointer; }
body.pe-app select:hover { border-color: var(--pe-frame); }
body.pe-app select:disabled { opacity: .45; cursor: default; }
body.pe-app input[type=range]:not(.pe-colp-sliders *) { -webkit-appearance: none; appearance: none; height: 18px; margin: 0; background: transparent; cursor: pointer; accent-color: auto; }
body.pe-app input[type=range]:not(.pe-colp-sliders *)::-webkit-slider-runnable-track { height: 3px; border-radius: var(--radius-pill); background: var(--pe-frame); }
body.pe-app input[type=range]:not(.pe-colp-sliders *)::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 1px solid rgba(0,0,0,.6); border-radius: 50%; background: var(--ink-soft); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
body.pe-app input[type=range]:not(.pe-colp-sliders *):hover::-webkit-slider-thumb { background: var(--ink); }
body.pe-app input[type=range]:not(.pe-colp-sliders *)::-moz-range-track { height: 3px; border-radius: var(--radius-pill); background: var(--pe-frame); }
body.pe-app input[type=range]:not(.pe-colp-sliders *)::-moz-range-thumb { width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.6); border-radius: 50%; background: var(--ink-soft); }
body.pe-app input[type=range]:disabled { opacity: .45; cursor: default; }
/* A slider whose track shows what it does (the Develop colour mixer). */
body.pe-app input[type=range].pe-tracked::-webkit-slider-runnable-track { height: 4px; background: var(--track); }
body.pe-app input[type=range].pe-tracked::-moz-range-track { height: 4px; background: var(--track); }
/* Icon buttons: align and distribute, 26 px square, one 1.5 stroke. */
.pe-iconbar { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.pe-ib { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--ink-soft); cursor: pointer; }
.pe-ib svg { width: 18px; height: 18px; }
.pe-ib:hover { background: var(--hairline); color: var(--ink); }
.pe-ib:active { background: var(--hairline-strong); }
.pe-ib:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.pe-ib:disabled { opacity: .35; cursor: default; }
.pe-ib-gap { width: 8px; }
.pe-props-align.pe-iconbar { display: flex; margin: 6px 0; }
@media (pointer: coarse) { .pe-ib { width: 44px; height: 44px; } .pe-ib svg { width: 20px; height: 20px; } }
/* The editor's tooltip: the name, the shortcut, and for a tool a line on
   what it does, as Photoshop's rich tooltips have. It comes after a
   pause, never under a finger, and never covers what it describes. */
.pe-tip { position: fixed; z-index: 90; max-width: 280px; padding: 6px 9px 7px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); box-shadow: 0 8px 22px rgba(0,0,0,.5); font: var(--text-2xs)/1.4 var(--pe-font); pointer-events: none; animation: pe-tip-in var(--dur-2) var(--ease-standard); }
.pe-tip b { font-weight: 600; }
.pe-tip kbd { margin-left: 8px; padding: 0 5px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); font: var(--text-2xs)/16px var(--pe-font); color: var(--ink-soft); }
.pe-tip span { display: block; margin-top: 3px; color: var(--ink-faint); }
@keyframes pe-tip-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pe-tip { animation: none; } }

/* A file handed over from another tool (handoff.js) says where it came
   from in a bar at the top of <main>, which the open editor otherwise
   hides with the rest of the page: it floats over the stage instead, as
   it does over Docs, until it is closed. */
body.pe-app .handoff-bar { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 300; width: max-content; max-width: calc(100% - 32px); margin: 0; box-shadow: var(--elev-2); }

/* The library: a folder of photos as a grid of thumbnails, with ratings,
   colour labels and keywords at the side (photo-editor-library.js). It
   fills most of the window, and on a phone the side panel goes under the
   grid. */
dialog.pe-dialog.pe-lib { box-sizing: border-box; width: min(96vw, 1180px); height: min(92vh, 860px); height: min(92dvh, 860px); max-height: none; display: none; flex-direction: column; gap: 8px; padding: 14px 16px 10px; overflow: hidden; }
dialog.pe-dialog.pe-lib[open] { display: flex; }
.pe-lib-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pe-lib-head, .pe-lib-bar, #peLibSupport, .pe-lib-status, .pe-lib-count { flex: none; }
.pe-lib-head h3 { margin: 0 6px 0 0; }
.pe-lib-where { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.pe-lib-head .pe-x { margin-left: auto; }
.pe-lib-bar { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.pe-lib-bar .pe-field { margin: 0; }
.pe-lib-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
.pe-lib-gridwrap { min-height: 0; overflow: auto; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--paper-inset); }
.pe-lib-empty { margin: 24px; color: var(--ink-soft); }
.pe-lib-empty[hidden] { display: none; }
.pe-lib-grid { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pe-lib-item { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 6px 6px 5px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); cursor: default; user-select: none; -webkit-user-select: none; }
.pe-lib-item:hover { border-color: var(--hairline-strong); }
.pe-lib-item[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pe-lib-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pe-lib-pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--paper); border-radius: var(--radius-sm); overflow: hidden; }
.pe-lib-pic img { display: block; max-width: 100%; max-height: 100%; }
.pe-lib-noimg { padding: 6px; font-size: var(--text-2xs); color: var(--ink-soft); text-align: center; }
.pe-lib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-2xs); }
.pe-lib-meta { display: flex; align-items: center; justify-content: space-between; min-height: 14px; font-size: var(--text-2xs); color: var(--accent); }
.pe-lib-dim { color: var(--ink-faint); }
/* The five label colours are the Layers panel's own (the --label set in
   the page's style), so a red label is the same red in both places. */
.pe-lib-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--label, transparent); }
.pe-lib-item[class*=" is-"] { border-bottom: 3px solid var(--label); }
.pe-lib-side { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.pe-lib-side h4 { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pe-lib-info { margin: 0; font-size: var(--text-2xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.pe-lib-stars, .pe-lib-labels, .pe-lib-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.pe-lib-stars button, .pe-lib-labels button, .pe-lib-flags button { min-width: 32px; min-height: 28px; padding: 0 8px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink); font: var(--text-2xs) var(--pe-font); cursor: pointer; }
.pe-lib-labels button[data-label]:not([data-label=""]) { border-left: 6px solid var(--label); }
.pe-lib-stars button[aria-pressed="true"], .pe-lib-labels button[aria-pressed="true"], .pe-lib-flags button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.pe-lib-stars button:focus-visible, .pe-lib-labels button:focus-visible, .pe-lib-flags button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pe-lib-acts { display: flex; flex-direction: column; gap: 6px; }
.pe-lib-dev { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.pe-lib-dev h5 { margin: 0; font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.pe-lib-devacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.pe-lib-dev .pe-field { margin: 0; }
.pe-lib-status { margin: 0; min-height: 1.4em; font-size: var(--text-2xs); color: var(--ink); }
.pe-lib-status.is-warn { color: var(--warn, var(--ink)); }
.pe-lib-count { margin: 0; font-size: var(--text-2xs); color: var(--ink-soft); }
.pe-lib-flags button:disabled { opacity: .5; cursor: default; }
/* A pick is a small flag in the thumbnail's corner, as Lightroom marks it;
   the Quick Collection a dot in the other. */
.pe-lib-pic { position: relative; }
.pe-lib-flag { position: absolute; top: 4px; left: 4px; display: flex; padding: 2px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .55); color: var(--ink); }
.pe-lib-quick { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); }
/* A virtual copy is named in the thumbnail's lower corner, as Lightroom
   turns the corner of its page; the photo it was made from says how many
   there are of it. */
.pe-lib-vc, .pe-film-vc { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); padding: 1px 5px; overflow: hidden; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .62); color: var(--on-accent); font: var(--text-2xs)/1.4 var(--font-mono); letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pe-lib-vc.is-master { left: auto; right: 4px; }
.pe-film-list button { position: relative; }
.pe-film-vc { left: 2px; bottom: 2px; padding: 0 3px; }
/* Smart collections: a rule a row, field, test, value and its remove. */
.pe-sm-rules { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pe-sm-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) 32px; gap: 6px; align-items: center; }
.pe-sm-row select, .pe-sm-row input { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .pe-sm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; } .pe-sm-row [data-sm="value"] { grid-column: 1 / 3; } }
@media (pointer: coarse) { .pe-sm-row select, .pe-sm-row input, .pe-sm-row .pe-x { min-height: 44px; } }
@media (pointer: coarse) { .pe-lib-stars button, .pe-lib-labels button, .pe-lib-flags button { min-height: 44px; min-width: 44px; } }
@media (max-width: 760px) {
  dialog.pe-dialog.pe-lib { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; padding: 10px 12px; overflow: auto; }
  .pe-lib-main { display: flex; flex-direction: column; }
  .pe-lib-gridwrap { min-height: 50vh; }
  .pe-lib-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
/* Develop's masks: the kinds to add, the list, and the picked mask's
   sliders; and the bar over the picture while a mask is drawn on it. */
.pe-dm-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pe-dm-list { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); }
.pe-dm-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 8px; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.pe-dm-list li:last-child { border-bottom: 0; }
.pe-dm-list li[aria-selected="true"] { background: var(--accent-soft, var(--paper-inset)); box-shadow: inset 3px 0 0 var(--accent-strong); }
.pe-dm-list .pe-check { margin: 0; }
.pe-dm-name { flex: 1 1 auto; min-width: 6em; font-weight: 600; overflow-wrap: anywhere; }
.pe-dm-edit { border-top: 1px solid var(--hairline); padding-top: 4px; }
.pe-dp { display: flex; flex-direction: column; gap: 8px; max-width: 32rem; }
.pe-dp .pe-field { margin: 0; }
.pe-dp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-maskedit { position: absolute; inset: 0; z-index: 6; }
.pe-maskedit-cv { position: absolute; left: 0; top: 0; cursor: crosshair; touch-action: none; }
.pe-maskedit-bar { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-size: var(--text-2xs); }
.pe-maskedit-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.pe-maskedit-bar input[type=range] { width: 110px; accent-color: var(--accent-strong); }
.pe-maskedit-how { flex: 1 1 14em; color: var(--ink-soft); }
.pe-maskedit-bar .pe-btn { margin-left: auto; }
@media (pointer: coarse) { .pe-dm-add .pe-btn, .pe-dm-list .pe-btn, .pe-maskedit-bar .pe-btn { min-height: 44px; } .pe-dm-list li { min-height: 44px; } }

/* Lists added with Photoshop's parity work: a row's own sub-line (an effect
   layer in the Filter Gallery, a droplet in the Actions panel) and its
   small button at the end; the Layer Style dialog's global light and the
   numbered instances of an effect that can be stacked; and the Filter
   Gallery, a preview, the effects by family and the picked one's settings
   side by side, one above another on a narrow screen. */
.pe-history button small { display: block; font-size: var(--text-2xs); color: var(--ink-faint); }
.pe-history li > .pe-action { flex: 1 1 auto; min-width: 0; }
.pe-history li > .pe-x { flex: 0 0 40px; width: 40px; text-align: center; }
.pe-fx-stack button { min-width: 36px; font-variant-numeric: tabular-nums; }
.pe-fx-stack button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: var(--paper); }
.pe-fx-global { padding-bottom: var(--space-2); }
dialog.pe-dialog.pe-fg { width: min(96vw, 1180px); }
.pe-fg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px 240px; gap: var(--space-4); align-items: start; }
.pe-fg-grid canvas { width: 100%; height: auto; background: var(--paper-inset); border: 1px solid var(--rule); border-radius: var(--radius-md); display: block; }
.pe-fg-list { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow: auto; }
.pe-fg-list .pe-mini { margin-top: var(--space-1); }
.pe-fg-list .pe-mini button { min-height: 32px; padding: var(--space-1) 9px; }
.pe-fg-list .pe-mini button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); }
@media (max-width: 900px) { .pe-fg-grid { grid-template-columns: minmax(0, 1fr); } }
/* A phone has no status bar for the privacy badge to sit in, and in its
   corner it lay on the dock's first tab; it stands aside, as it does in
   Sheets and Plan on a phone. */
@media (max-width: 900px) { body.pe-app #ppBadge { display: none; } }
/* Before and after in an adjustment's dialog, at the start of its buttons. */
.pe-adj-preview { margin: 0 auto 0 0; }
/* The Character panel's OpenType part. */
.pe-ot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.pe-ot-h { margin: 0 0 4px; font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pe-ot-sets { display: flex; flex-wrap: wrap; gap: 0 12px; }
.pe-ot-sets .pe-check { margin: 4px 0; }
/* A mask or a selection shown in grey: Develop's masks and Color Range.
   The canvas paints its own black, so no colour is set here. */
.pe-dm-preview, .pe-range-preview { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); }
.pe-dm-preview { max-width: 240px; margin: 8px 0; }
.pe-range-preview { max-width: 320px; margin: 10px auto 0; cursor: crosshair; }
/* The filmstrip: the Library's photos along the foot of the editor. */
.pe-film { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 6px; background: var(--pe-tabbar); border-top: 1px solid var(--rule); }
.pe-film[hidden] { display: none; }
.pe-film-list { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.pe-film-list button { display: flex; align-items: center; justify-content: center; width: 88px; height: 62px; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-soft); font: var(--text-2xs) var(--pe-font); cursor: pointer; }
.pe-film-list button span { padding: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-film-list img { display: block; max-width: 100%; max-height: 100%; }
.pe-film-list [aria-selected="true"] button { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pe-film-list button:focus-visible, .pe-film-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pe-film-step { flex: none; width: 32px; height: 62px; padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink); font: var(--text-lg) var(--pe-font); cursor: pointer; }
.pe-film-step:disabled { opacity: .4; cursor: default; }
@media (pointer: coarse) { .pe-film-step { width: 44px; } }
@media (min-width: 901px) { body.pe-app.pe-film-on:not(.pe-bare) #pe { grid-template-rows: 28px 38px minmax(0, 1fr) 72px 24px; } body.pe-app.pe-bare .pe-film { display: none; } }
/* A short window: the tool rail tightens so its last buttons (Quick Mask,
   Screen Mode) stay above the status bar at 1440 x 900, and below that it
   scrolls with a thin bar that says there is more, rather than hiding the
   end of it. */
@media (min-width: 901px) and (max-height: 980px) and (pointer: fine) {
  body.pe-app .pe-tool { height: 27px; }
  body.pe-app .pe-tools hr { margin: 3px auto; }
  body.pe-app .pe-swatches { margin-top: 4px; }
  body.pe-app .pe-tool-foot { margin-top: 2px; gap: 1px; }
}
@media (min-width: 901px) and (max-height: 820px) and (pointer: fine) { body.pe-app .pe-tool { height: 25px; } }
@media (min-width: 901px) and (max-height: 820px) { body.pe-app .pe-tools { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; } }
/* Develop's eleven sections in two rows of six, each tab in its column,
   never a third row; on a phone, one row that scrolls sideways. */
.pe-adj-tabs { display: grid; grid-template-columns: repeat(6, max-content); justify-content: start; column-gap: 2px; }
.pe-adj-tabs button { padding: 6px 6px 7px; text-align: left; white-space: nowrap; }
dialog.pe-dialog.pe-adj-sectioned { width: min(92vw, 480px); }
@media (max-width: 560px) {
  .pe-adj-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
  .pe-adj-tabs button { flex: none; }
}
/* Develop in the whole window: the picture on the left, the histogram,
   sections and sliders on the right, the buttons at their foot. */
.pe-dev-fullbtn { position: absolute; top: 12px; right: 16px; }
.pe-dev-fullbtn[hidden] { display: none; }
#peAdjDlg:has(.pe-dev-fullbtn:not([hidden])) h3 { padding-right: 140px; }
dialog.pe-dialog.pe-dev-full, body.pe-app dialog.pe-dialog.pe-dev-full { box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.pe-dev-full > form { display: grid; grid-template-columns: minmax(0, 1fr) 460px; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.pe-dev-view { position: relative; grid-column: 1; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; background: var(--pe-frame, var(--paper-inset)); }
.pe-dev-cv { display: block; }
.pe-dev-view-label { position: absolute; left: 12px; top: 10px; color: var(--ink-soft); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pe-dev-side { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow: auto; padding: 14px 16px 8px; border-left: 1px solid var(--hairline-strong); background: var(--paper-raised); }
.pe-dev-hist { display: block; width: 100%; height: 96px; margin: 0 0 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--paper-inset); }
.pe-dev-full .pe-dialog-row { grid-column: 2; grid-row: 2; margin: 0; padding: 10px 16px; border-left: 1px solid var(--hairline-strong); border-top: 1px solid var(--hairline); background: var(--paper-raised); }
.pe-dev-full #peCurvesBox { max-width: 100%; height: auto; }
@media (max-width: 900px) {
  .pe-dev-full > form { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 38vh) minmax(0, 1fr) auto; }
  .pe-dev-view { grid-row: 1; }
  .pe-dev-side { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--hairline-strong); }
  .pe-dev-full .pe-dialog-row { grid-column: 1; grid-row: 3; border-left: 0; }
  .pe-dev-hist { margin-top: 4px; height: 72px; }
}
@media (pointer: coarse) { .pe-dev-fullbtn { min-height: 44px; } }
/* A slider drawn by hand keeps a ring for the keyboard: the Color panel's
   R, G and B, and every other. */
body.pe-app input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-maskedit-bar { -webkit-user-select: none; user-select: none; }

/* The way home sits in the menu bar, as tall as the bar: at the shared 36
   pixels it hung above the window's top edge and its mark was cut. */
@media (min-width: 901px) {
  body.pe-app .pe-menubar .os-app-home { width: 28px; height: 28px; margin-right: 2px; border-radius: 0; }
  body.pe-app .pe-menubar .os-app-home img { width: 20px; height: 20px; }
}
/* The chevron at the end of a row that scrolls on a phone (details.js)
   is held off by a hairline these grey bars show: the theme's was darker
   than them and could not be seen, so a menu name running under the
   chevron looked cut off rather than scrolled. */
@media (max-width: 900px) { body.pe-app .row-cue { border-color: var(--rule-strong); } }

/* The dock's tabs sit in a tab list of their own, inside the row that scrolls
   and holds the collapse button; laid out as if they were the row's. */
body.pe-app .pe-dock-tablist { display: contents; }