/* 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; }

/* Words for a screen reader only: the picture's description on the stage. */
.pe-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 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; }
/* Try an example, on the stage's grey: the ink, as the rest of the small
   print here is, at the size of the line above it. */
.pe-home .ob-example { margin-top: -6px; font: 500 var(--text-xs)/1.3 var(--pe-font); color: var(--ink); }
.pe-home .ob-example-file { color: var(--ink); border-color: var(--rule-strong); background: transparent; }
.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)); }
@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)); }
  /* 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); }

/* 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: white; 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 { --os-fade: var(--dur-fade); 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: os-rise-soft var(--dur-2) var(--ease-standard) backwards; }
.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); }

/* 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 goes to two columns, as Photoshop's does,
   rather than shrinking its buttons below the size a pointer needs; below
   that it scrolls, with a thin bar that says there is more. */
@media (min-width: 901px) and (max-height: 940px) {
  body.pe-app .pe-body { grid-template-columns: 74px minmax(0, 1fr) 312px; }
  body.pe-app .pe-tools { display: grid; grid-template-columns: 32px 32px; justify-content: center; align-content: start; column-gap: 2px; row-gap: 1px; }
  body.pe-app .pe-tools hr, body.pe-app .pe-tools .pe-swatches, body.pe-app .pe-tools .pe-tool-foot { grid-column: 1 / -1; }
  body.pe-app .pe-tools hr { width: 60px; }
  body.pe-app .pe-tool-foot { flex-direction: row; justify-content: center; }
  body.pe-app .pe-optbar .pe-brush-settings { left: 84px; }
}
@media (min-width: 901px) and (max-height: 600px) { 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; }
/* The tool rail's colours and the Color panel's: foreground and background
   on a diagonal, neither over the other, so each is a whole 24 px target. */
@media (min-width: 901px) {
  body.pe-app .pe-swatch-btn span { border-radius: 0 !important; box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink-faint); }
  body.pe-app .pe-swatches .pe-foot-btn { width: 24px; height: 24px; }
  body.pe-app .pe-swap:hover, body.pe-app .pe-swatches .pe-foot-btn:hover { color: var(--ink); background: var(--pe-frame); }
}
body.pe-app .pe-colp { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
body.pe-app .pe-colp-sw { display: grid; grid-template: 24px 24px / 24px 24px; width: 48px; }
body.pe-app .pe-colp-sw button { width: 24px; height: 24px; border: 0; padding: 0; box-shadow: inset 0 0 0 1px var(--paper), 0 0 0 1px var(--ink-faint); cursor: pointer; }
body.pe-app .pe-colp-fg { grid-area: 1 / 1; }
body.pe-app .pe-colp-bg { grid-area: 2 / 2; }
body.pe-app .pe-colp-sw button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--paper), 0 0 0 2px var(--accent-strong); }
/* Each channel's ramp is a 10 px track in a 24 px slider, so the slider is
   a whole target and the three rows do not crowd each other. */
body.pe-app .pe-colp-sliders .pe-field { grid-template-columns: 14px 1fr 30px; margin: 0; }
body.pe-app .pe-colp-sliders input[type=range] { -webkit-appearance: none; appearance: none; height: 24px; margin: 0; background: transparent; cursor: pointer; }
body.pe-app .pe-colp-sliders input[type=range]::-webkit-slider-runnable-track { height: 10px; background: var(--ramp, var(--pe-frame)); box-shadow: 0 0 0 1px var(--paper); }
body.pe-app .pe-colp-sliders input[type=range]::-moz-range-track { height: 10px; background: var(--ramp, var(--pe-frame)); box-shadow: 0 0 0 1px var(--paper); }
body.pe-app .pe-colp-sliders input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 14px; margin-top: -2px; border: 1px solid var(--paper); border-radius: var(--radius-sm); background: var(--ink); }
body.pe-app .pe-colp-sliders input[type=range]::-moz-range-thumb { width: 6px; height: 12px; border: 1px solid var(--paper); border-radius: var(--radius-sm); background: var(--ink); }
body.pe-app .pe-colp-sliders input[type=range]:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }

/* ------------------------------------------- the window on a phone, as a window
   (28 October 2026.) The phone layout above made each part a row and kept
   the page: the menus, the options, the tools and the canvas, then the
   three panel groups under it as cards. At 360 by 780 that was a page
   1,600 pixels tall that scrolled like a document, and the start screen
   was cut off where the Color panel began, its sizes ending at "2480 ×".

   So on a phone the editor is a window, as it is on a wide screen: fixed
   to the screen and never scrolled as a page. The menu bar, the tool's
   options and the tools run along the top, flat bars rather than cards,
   so the canvas has the width of the screen; the canvas takes all of the
   height they leave; and the status bar is at the foot. The panel groups
   wait behind a row of buttons above the status bar, one a group
   (photo-editor-shell.js), and come up one at a time as a sheet over the
   lower part of the canvas, with the canvas above it dimmed by a solid
   colour, never blurred. On a wide screen the row, the dimming and the
   sheet's close buttons are not displayed. */
.pe-sheetbar, .pe-sheet-dim, .pe-sheet-x { display: none; }
@keyframes pe-sheet-in { from { opacity: 0; transform: translateY(var(--os-rise-lg)); } }
@keyframes pe-dim-in { from { opacity: 0; } }
@media (max-width: 900px) {
  body.pe-app { overflow: hidden; }
  body.pe-app #pe {
    position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; gap: 0; max-width: none; margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    box-sizing: border-box; background: var(--pe-panel);
  }
  body.pe-app #pe > * { flex: none; }
  body.pe-app .pe-menubar, body.pe-app .pe-optbar { border-radius: 0; box-shadow: none; background: var(--pe-panel); border-bottom: 1px solid var(--rule); }
  body.pe-app .pe-optbar { background: var(--pe-bar); }
  body.pe-app .pe-optbar .pe-opts { min-height: 48px; }

  /* The tools and the canvas share what is left, the tools a row over it. */
  body.pe-app #pe > .pe-body { flex: 1 1 auto; position: relative; min-height: 0; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 0; }
  body.pe-app .pe-body > .pe-tools { grid-row: 1; padding: 2px 6px; border-radius: 0; box-shadow: none; background: var(--pe-panel); border-bottom: 1px solid var(--rule); }
  body.pe-app .pe-body > .pe-docarea { grid-row: 2; height: auto; min-height: 0; background: var(--pe-pasteboard); }
  body.pe-app .pe-tabs { flex: none; flex-wrap: nowrap; margin: 0; padding: 4px 6px; overflow-x: auto; scrollbar-width: none; background: var(--pe-tabbar); }
  body.pe-app .pe-tabs::-webkit-scrollbar { display: none; }
  body.pe-app .pe-tab { flex: none; }
  body.pe-app .pe-stage { flex: 1; height: auto; min-height: 0; border-radius: 0; box-shadow: none; background: var(--pe-frame); }
  body.pe-app .pe-stage:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
  /* The canvas takes every touch for drawing; the start screen over it is
     a list to scroll with a finger. */
  body.pe-app .pe-empty { touch-action: pan-y; overscroll-behavior: contain; }

  /* The row of panel buttons, and the status bar under it. */
  body.pe-app .pe-sheetbar { display: flex; background: var(--pe-panel); border-top: 1px solid var(--rule); }
  body.pe-app .pe-sheetbar[hidden], body.pe-app .pe-sheet-btn[hidden] { display: none; }
  body.pe-app .pe-sheet-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--ink-soft); font: 500 var(--text-xs) var(--pe-font); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.pe-app .pe-sheet-btn:hover { color: var(--ink); }
  body.pe-app .pe-sheet-btn[aria-expanded="true"] { color: var(--ink); background: var(--paper-raised); box-shadow: inset 0 2px 0 var(--accent-strong); }
  body.pe-app .pe-sheet-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  body.pe-app .pe-statusbar { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 24px; padding: 2px 10px calc(2px + env(safe-area-inset-bottom)); background: var(--pe-panel); border-top: 1px solid var(--rule); }
  body.pe-app .pe-statusbar .pe-readout { flex: none; margin: 0; padding: 0; font: var(--text-2xs) var(--pe-font); color: var(--ink-soft); white-space: nowrap; }
  body.pe-app .pe-statusbar .pe-status { flex: 1; min-width: 0; min-height: 0; margin: 0; padding: 0; font: var(--text-2xs) var(--pe-font); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.pe-app .pe-statusbar .pe-status.warn { color: var(--danger); }

  /* The sheet: one group, its tabs along the top with the close button at
     their end, the panel under them scrolling inside the sheet. The
     group's collapse button is the dock's; a sheet is put away instead. */
  body.pe-app .pe-panels { display: none; }
  body.pe-app .pe-panels.is-sheet:not([hidden]) {
    --os-fade: var(--dur-fade);
    position: absolute; top: auto; left: 0; right: 0; bottom: 0; z-index: 26;
    display: flex; flex-direction: column; max-height: 78%; margin: 0; padding: 0; gap: 0; overflow: hidden;
    background: var(--pe-panel); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 0 0 1px var(--rule), 0 -12px 30px rgba(0,0,0,.5);
    animation: pe-sheet-in var(--dur-3) var(--ease-standard) backwards;
  }
  body.pe-app .pe-panels.is-sheet .pe-dock-group:not(.is-sheet) { display: none; }
  body.pe-app .pe-dock-group.is-sheet { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border-radius: 0; box-shadow: none; background: var(--pe-panel); }
  body.pe-app .pe-dock-group.is-sheet .pe-dock-tabs { flex: none; background: var(--pe-tabbar); }
  body.pe-app .pe-dock-group.is-sheet .pe-dock-tab.is-collapse { display: none; }
  body.pe-app .pe-dock-group.is-sheet .pe-dock-body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
  /* The sheet is the one thing that scrolls: a list inside it that
     scrolled as well would be a scroller in a scroller under one finger. */
  body.pe-app .pe-dock-group.is-sheet .pe-layers { max-height: none; }
  body.pe-app .pe-sheet-x { display: block; position: sticky; right: 0; flex: none; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: var(--pe-tabbar); box-shadow: -1px 0 0 var(--rule-strong); color: var(--ink-soft); font: var(--text-xl)/1 var(--pe-font); cursor: pointer; }
  body.pe-app .pe-sheet-x:hover { color: var(--ink); }
  body.pe-app .pe-sheet-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  body.pe-app .pe-sheet-dim:not([hidden]) { --os-fade: var(--dur-fade); display: block; position: absolute; inset: 0; z-index: 25; background: rgba(0,0,0,.5); animation: pe-dim-in var(--dur-2) var(--ease-standard) backwards; }

  /* A file handed over from another tool floats clear of the row of
     panel buttons rather than over it. */
  body.pe-app .handoff-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* In the phone's row of tools the four colour cells stand side by side,
   the two colours then Swap and Default, so the row stays one 44 px
   target high instead of the two of the column's square (which a finger's
   44 px cells make 88 px). On its side the tools are a column again, below,
   and keep the square. */
@media (max-width: 900px) and (min-height: 501px) {
  body.pe-app .pe-tools .pe-swatches { grid-template: auto / repeat(4, auto); width: auto; }
  body.pe-app .pe-tools .pe-swatch-btn.fg { grid-area: 1 / 1; }
  body.pe-app .pe-tools .pe-swatch-btn.bg { grid-area: 1 / 2; }
  body.pe-app .pe-tools .pe-swap { grid-area: 1 / 3; }
  body.pe-app .pe-tools .pe-swatches .pe-foot-btn { grid-area: 1 / 4; }
}
/* A phone on its side has height for little but the bars: the tools go
   back to a column at the left, as on a wide screen, so the canvas keeps
   the row they took. */
@media (max-width: 900px) and (max-height: 500px) {
  body.pe-app #pe > .pe-body { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  body.pe-app .pe-body > .pe-tools { grid-row: 1; grid-column: 1; flex-direction: column; align-items: center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px; border-bottom: 0; border-right: 1px solid var(--rule); }
  body.pe-app .pe-body > .pe-tools hr { width: auto; align-self: stretch; margin: 2px 4px; border-left: 0; border-top: 1px solid var(--rule-strong); }
  body.pe-app .pe-body > .pe-docarea { grid-row: 1; grid-column: 2; }
  body.pe-app .pe-body:has(> #peTools[hidden]) > .pe-docarea { grid-column: 1 / -1; }
}

/* Windows high contrast replaces every fill with the system's, which left
   the colour chips, the swatches and a picture's label in the library
   empty: their colour is what they say, so it is kept (details.css has
   the rest of the mode). */
@media (forced-colors: active) {
  #peFg, #peBg, .pe-colp-fg, .pe-colp-bg, .pe-sw, .pe-lib-dot { forced-color-adjust: none; }
}

/* ------------------------------------------- motion inside the window
   (30 October 2026.) The window arrived by fading, and then nothing in it
   moved: a menu, a tool's options, a panel brought to the front, a new
   layer, a new step in History and a new tab all appeared in one frame,
   and the picture took the start screen's place the same way. Each now
   arrives as the rest of the site's things do (theme.css, MOTION): a menu
   and its submenus fade in over --dur-3 (they hold panels fixed to the
   screen, which a transform on the menu would carry off with it, so they
   do not rise); a tool's flyout and the brush settings rise a little over
   the same; the options bar's row for the tool in hand fades in over
   --dur-2, and so does a panel brought to the front of its group; a layer,
   a step and a tab that were not there before rise or fade into their
   list, a picture's rows dealt a --stagger apart when it opens
   (photo-editor.js marks them is-new and counts them in --deal); the
   picture itself fades in over the stage where the start screen was, and
   the start screen's parts deal in a step apart when it is back. The tool
   in hand carries a line of the accent along its edge, the mark the
   phone's row of panel buttons already uses; a slider's thumb answers the
   pointer with a halo; the status line fades when what it says changes;
   and a slow filter fills a thin bar under its note as it works. Every
   distance is one of theme.css's, nought with motion switched down, and
   everything that arrives asks for the fade it keeps then. */
body.pe-app .pe-menu[open] > div, body.pe-app .pe-sub.is-open > .pe-subpanel { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
body.pe-app .pe-flyout, body.pe-app .pe-optbar.show-brush .pe-brush-settings:not([hidden]) { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
body.pe-app .pe-optbar [data-for].is-on { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
body.pe-app .pe-dock-body > .pe-panel:not([hidden]) { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
body.pe-app .pe-layer.is-new, body.pe-app .pe-history li.is-new { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--stagger) * var(--deal, 0)); }
body.pe-app .pe-tab.is-new { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
body.pe-app #peView.is-arriving { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-4) var(--ease-standard) backwards; }
/* The start screen: the title and its buttons, then the recent pictures,
   the sizes and the templates, a step apart (--os-step is the title
   block's step on every page). */
.pe-home-in > * { --os-fade: var(--dur-fade); animation: os-rise var(--dur-4) var(--ease-emph) backwards; }
.pe-home-in > :nth-child(2) { animation-delay: var(--os-step); }
.pe-home-in > :nth-child(3) { animation-delay: calc(var(--os-step) * 2); }
.pe-home-in > :nth-child(n+4) { animation-delay: calc(var(--os-step) * 3); }
/* The tool in hand: its grey, and a line of the accent along the edge
   nearest the picture, at the left of the column and under the phone's row. */
body.pe-app .pe-tool[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--accent-strong); }
@media (max-width: 900px) { body.pe-app .pe-tool[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent-strong); } }
/* The status line's words, when they change. */
body.pe-app .pe-status.is-fresh { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
/* A slider's thumb under the pointer, and held: a halo of the hairline,
   so the hand knows it has the thumb before it moves. Switched down, the
   halo simply appears. */
body.pe-app input[type=range]:not(.pe-colp-sliders *)::-webkit-slider-thumb { transition: background-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); }
body.pe-app input[type=range]:not(.pe-colp-sliders *):hover::-webkit-slider-thumb, body.pe-app input[type=range]:not(.pe-colp-sliders *):active::-webkit-slider-thumb { box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 0 4px var(--hairline-strong); }
body.pe-app input[type=range]:not(.pe-colp-sliders *):hover::-moz-range-thumb, body.pe-app input[type=range]:not(.pe-colp-sliders *):active::-moz-range-thumb { box-shadow: 0 0 0 4px var(--hairline-strong); }
:root[data-motion="none"] body.pe-app input[type=range]::-webkit-slider-thumb { transition: none; }
/* Figures in the bars and beside the sliders keep their width as they
   change, so a value does not jog its row while the thumb is dragged. */
body.pe-app .pe-field output, body.pe-app .pe-bi output, body.pe-app .pe-readout, body.pe-app .pe-ask .pe-field output { font-variant-numeric: tabular-nums; }
/* A slow filter at work in its dialog: a thin bar under the note, filled
   to the fraction done (photo-editor-adjust.js sets --p). */
.pe-progress { height: 2px; margin: 8px 0 0; border-radius: var(--radius-pill); background: var(--hairline-strong); overflow: hidden; }
.pe-progress[hidden] { display: none; }
.pe-progress > i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent-strong); transform-origin: left; scale: var(--p, 0) 1; transition: scale var(--dur-2) var(--ease-standard); }