/* OBSCURA OS: PDF Studio.

   One working window, laid out as a desktop PDF editor is: the bar with the
   way home, the menus, the file's name and Save; the row of tools; the
   options of the tool that is open; then the pages and bookmarks on the
   left, the document in the middle, the tool's panel on the right, and a
   status line across the foot. The document is the only thing that
   scrolls. Organise, Compare and the Action Wizard take the middle over
   with views of their own.

   The page is an application while <body> carries ps-app, which
   pro-load.js takes off when it shows the lock screen instead, so the lock
   screen is laid out as an ordinary page. Every colour, size, corner and
   duration is a theme.css token, so the window follows the colourway and
   the dark mode the rest of the site does; the pages themselves stay white,
   as paper is. On a phone the two side panels become sheets over the
   document, and every control is at least 44 pixels square. */

.ps-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ps-body .ps-noscript { padding: var(--space-4); }

/* ------------------------------------------------------------ the frame */

body.ps-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; padding: 0; overflow: hidden; }
body.ps-app .os-footer, body.ps-app .os-topbar, body.ps-app .os-toolnav { display: none !important; }
body.ps-app #ppBadge { left: auto; right: var(--space-1); bottom: 3px; min-height: 22px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }

.ps {
  --ps-canvas: color-mix(in srgb, var(--paper-inset) 80%, var(--ink-faint) 20%);
  --ps-nav: 208px;
  --ps-side: 316px;
  --ps-hit: 32px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
  font: var(--text-xs)/1.4 var(--font-sans);
  --os-fade: var(--dur-fade);
  animation: os-fade-in var(--dur-4) var(--ease-standard) both;
}
.ps *, .ps *::before, .ps *::after { box-sizing: border-box; }
.ps button, .ps input, .ps select, .ps textarea { font: inherit; color: inherit; }
.ps svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ps-grow { flex: 1 1 auto; }
.ps-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ps-link { border: 0; background: none; padding: 0; color: var(--accent-strong); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ps-hint { margin: 0; color: var(--ink-faint); font-size: var(--text-2xs); line-height: 1.45; }
.ps-hint:empty { display: none; }

/* ------------------------------------------------------------ the bar */

.ps-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; padding: 6px 10px; border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.ps-id { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.ps-home { display: inline-flex; align-items: center; justify-content: center; width: max(36px, var(--ps-hit)); height: max(36px, var(--ps-hit)); border-radius: var(--radius-md); color: var(--ink-soft); }
.ps-home:hover { background: var(--paper-inset); color: var(--ink); }
.ps-home svg { width: 20px; height: 20px; }
.ps-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.ps-menubar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ps-menu { position: relative; }
.ps-menu > summary { list-style: none; display: flex; align-items: center; min-height: var(--ps-hit); padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: default; user-select: none; }
.ps-menu > summary::-webkit-details-marker { display: none; }
.ps-menu > summary:hover, .ps-menu[open] > summary { background: var(--paper-inset); }
.ps-drop { position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; display: flex; flex-direction: column; min-width: 260px; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), var(--elev-2, 0 12px 32px rgb(0 0 0 / 0.18)); }
.ps-menu[open] > .ps-drop { animation: os-menu-in var(--dur-3) var(--ease-standard); }
.ps-drop button, .ps-drop a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); min-height: var(--ps-hit); padding: 6px var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ps-drop button:hover, .ps-drop button:focus-visible, .ps-drop a:hover, .ps-drop a:focus-visible { background: var(--paper-inset); outline: none; }
.ps-drop button:disabled { opacity: 0.45; cursor: default; background: none; }
.ps-drop kbd { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.ps-drop hr { width: 100%; border: 0; border-top: 1px solid var(--rule); margin: var(--space-1) 0; }
.ps-docname { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.25; }
.ps-name { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ps-saved { white-space: nowrap; }
.ps-ib { display: inline-flex; align-items: center; justify-content: center; width: var(--ps-hit); height: var(--ps-hit); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; flex: none; }
.ps-ib:hover:not(:disabled) { background: var(--paper-inset); color: var(--ink); }
.ps-ib:disabled { opacity: 0.35; cursor: default; }
.ps-ib[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.ps-save { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--ps-hit); padding: 0 var(--space-3); }
.ps-save svg { width: 16px; height: 16px; }
/* With nothing open there is nothing to save: the button sits back as
   a quiet outline rather than the accent at half strength, which still
   read as the thing to press. Its colour needs !important to win over
   the theme's, which sets every primary button's that way. */
body.ps-app button.btn-primary.ps-save:disabled { opacity: 1; background: transparent; border-color: var(--rule); color: var(--ink-faint) !important; box-shadow: none; }

/* ------------------------------------------------------------ tools */

.ps-tools { display: flex; gap: 2px; padding: var(--space-1) var(--space-2); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.ps-tools::-webkit-scrollbar { display: none; }
.ps-tools button { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; min-height: 36px; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
.ps-tools button:hover { background: var(--paper-inset); color: var(--ink); }
/* The tool in hand: its tint, and a line of the accent along the edge
   nearest its options, so the eye finds it in a row of fourteen. */
.ps-tools button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-strong); }
.ps-tools svg { width: 20px; height: 20px; }
/* Thirteen tools fit a laptop's width with a little less room round each;
   narrower than that, the row scrolls, as it does on a phone. */
@media (max-width: 1480px) {
  .ps-tools button { gap: var(--space-1); padding: 0 var(--space-2); }
}

.ps-opts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); min-height: 44px; padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--rule); background: var(--paper-inset); color: var(--ink-soft); }
.ps-opts:empty { display: none; }
/* The document and the status line keep their own rows. With the options
   row empty, as it is in Edit before a PDF is open, auto-placement moved the
   document up into the options row and gave the status line the space that
   was meant for the page: a strip of canvas and half a screen of nothing. */
.ps > .ps-main { grid-row: 4; }
.ps > .ps-status { grid-row: 5; }
.ps-opts-name { font-weight: 600; color: var(--ink); }
.ps-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.ps-seg button { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 30px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.ps-seg button:hover { color: var(--ink); background: var(--paper-inset); }
.ps-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
/* Fourteen kinds of comment: on a narrower desktop, their icons alone, each named by its tooltip and to a screen reader. */
@media (min-width: 761px) and (max-width: 1400px) {
  .ps-seg-cm button { padding: 0 6px; }
  .ps-seg-cm button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.ps-opt { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.ps-opt input[type="number"] { width: 72px; }
.ps-opt input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }

/* ------------------------------------------------------------ fields */

.ps input[type="text"], .ps input[type="number"], .ps input[type="password"], .ps input[type="search"], .ps select, .ps textarea {
  min-height: 30px; padding: 4px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
}
.ps textarea { width: 100%; min-height: 72px; resize: vertical; line-height: 1.4; }
.ps input:focus-visible, .ps select:focus-visible, .ps textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.ps label.ps-field { display: grid; gap: var(--space-1); min-width: 0; color: var(--ink-soft); }
.ps label.ps-field > :is(input, select, textarea) { width: 100%; min-width: 0; }
.ps label.ps-field > span:first-child { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.ps label.ps-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; color: var(--ink); cursor: pointer; }

/* ------------------------------------------------------------ the working area */

.ps-main { position: relative; display: grid; grid-template-columns: var(--ps-nav) minmax(0, 1fr) var(--ps-side); grid-template-rows: minmax(0, 1fr); min-height: 0; }
.ps-main.no-nav { grid-template-columns: 0 minmax(0, 1fr) var(--ps-side); }
.ps-main.no-side { grid-template-columns: var(--ps-nav) minmax(0, 1fr) 0; }
.ps-main.no-nav.no-side { grid-template-columns: 0 minmax(0, 1fr) 0; }
.ps-main.is-view { grid-template-columns: 0 minmax(0, 1fr) var(--ps-side); }
.ps-main.is-view.no-side { grid-template-columns: 0 minmax(0, 1fr) 0; }
.ps-main.no-nav > .ps-nav, .ps-main.is-view > .ps-nav, .ps-main.no-side > .ps-side { visibility: hidden; overflow: hidden; border: 0; }
.ps-nav { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--rule); background: var(--paper-raised); }
.ps-nav-tabs { display: flex; gap: 2px; padding: var(--space-1); border-bottom: 1px solid var(--rule); }
.ps-nav-tabs button { display: inline-flex; align-items: center; justify-content: center; width: var(--ps-hit); height: var(--ps-hit); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-soft); cursor: pointer; }
.ps-nav-tabs button:hover { background: var(--paper-inset); color: var(--ink); }
.ps-nav-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.ps-thumbs, .ps-marks, .ps-attach { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ps-thumbs { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); }
.ps-marks[hidden], .ps-thumbs[hidden], .ps-attach[hidden] { display: none; }
/* Attached files: each with its size and date, to save or remove. */
.ps-attach-head { padding: var(--space-2); border-bottom: 1px solid var(--rule); }
/* The buttons are the site's .btn, drawn here as every application's own
   buttons are (Case, Keep, Books and the rest): 36px, the label at 14px
   and 600, the accent behind the one that does the thing and a rule
   round the secondary ones. A plain .btn is filled, as it is on the
   rest of the site. Before this they kept the site's larger 42px
   button at 13px and the reset's weight, so the start screen read as a
   different product. The rules after this one size the buttons in
   particular places. */
.ps .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-decoration: none; }
/* The colours at an element's weight more, to outrank the site's
   :root button.btn-secondary, which takes the rule away. */
.ps :is(a, button, label).btn { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: none; }
.ps :is(a, button, label).btn:not(.btn-secondary, .btn-danger, .ghost):hover:not(:disabled) { background: var(--accent-strong); }
.ps :is(a, button, label).btn-secondary { border-color: var(--rule-strong); background: var(--paper-raised); color: var(--ink); }
.ps :is(a, button, label).btn-secondary:hover:not(:disabled) { background: var(--paper-inset); }
.ps :is(a, button, label).btn.ghost { border-color: transparent; background: transparent; color: var(--ink); }
.ps :is(a, button, label).btn.ghost:hover:not(:disabled) { background: var(--paper-inset); }
.ps-attach-head .btn { width: 100%; }
.ps-attach-list { padding: var(--space-1); }
.ps-attach-list li { align-items: flex-start; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.ps-attach-file { display: grid; flex: 1 1 auto; min-width: 0; gap: 1px; line-height: 1.3; }
.ps-thumb { position: relative; width: 132px; padding: var(--space-1) var(--space-1) 20px; border: 2px solid transparent; border-radius: var(--radius-md); background: none; cursor: pointer; flex: none; }
.ps-thumb canvas { display: block; width: 100%; height: auto; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
.ps-thumb span { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: var(--text-2xs); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ps-thumb:hover { background: var(--paper-inset); }
.ps-thumb[aria-current="true"] { border-color: var(--accent-strong); background: var(--accent-soft); }

.ps-stage { position: relative; min-width: 0; min-height: 0; display: flex; background: var(--ps-canvas); }
/* Each page's number sits above it, in the gap before it, so the number
   over a page in view is that page's (--ps-no: the room it takes). */
.ps-pages { --ps-no: calc(var(--text-2xs) + 6px); flex: 1 1 auto; overflow: auto; padding: max(var(--space-5), var(--ps-no)) var(--space-4) var(--space-8); outline: none; touch-action: pan-x pan-y; }
.ps-pages.is-zooming > .ps-page { will-change: transform; }
/* Where a document is laid out to be made into a PDF (pdfs-convert.js): out of
   sight, and laid out all the same. */
.ck-layout-host { position: absolute; left: -200000px; top: 0; pointer-events: none; }
/* The keyboard's placing cursor (pdfs-app.js). */
.ps-placer { position: absolute; z-index: 6; pointer-events: none; outline: 2px solid var(--accent); outline-offset: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ps-placer.is-point { border-radius: 50%; }
.ps-layout-frame { position: fixed; left: -30000px; top: 0; border: 0; pointer-events: none; }
.ps-pages[hidden], .ps-view[hidden], .ps-empty[hidden] { display: none; }
.ps-page { position: relative; margin: 0 auto max(var(--space-4), var(--ps-no, 0px)); background: white; box-shadow: 0 1px 4px rgb(0 0 0 / 0.28); }
.ps-page > canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-3) var(--ease-standard); }
.ps-page.is-pending > canvas { opacity: 0.35; }
.ps-layer { position: absolute; inset: 0; }
.ps-page-no { position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 3px; text-align: center; font-size: var(--text-2xs); line-height: 1; color: var(--ink-soft); }
.ps-view { flex: 1 1 auto; min-width: 0; overflow: auto; }

.ps-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.ps-drop-zone { display: grid; justify-items: center; gap: var(--space-2); max-width: 460px; padding: var(--space-7) var(--space-6); border: 2px dashed var(--rule-strong); border-radius: var(--radius-lg); background: var(--paper-raised); text-align: center; transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
.ps-drop-zone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.ps-drop-zone svg { width: 40px; height: 40px; color: var(--accent-strong); }
.ps-drop-zone h2 { margin: 0; font: 650 var(--text-xl)/1.2 var(--font-headline); letter-spacing: -.01em; }
.ps-drop-zone p { margin: 0 0 var(--space-2); color: var(--ink-soft); font-size: var(--text-sm); }

/* ------------------------------------------------------------ on the page */

.ps-box { position: absolute; border: 1px dashed transparent; border-radius: var(--radius-sm); cursor: pointer; }
.ps-layer.show-boxes .ps-box { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ps-box:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ps-box.is-sel { border: 1.5px solid var(--accent-strong); background: color-mix(in srgb, var(--accent) 10%, transparent); cursor: move; }
.ps-box.is-locked { cursor: not-allowed; }
.ps-box.is-locked:hover { border-color: var(--ink-faint); background: color-mix(in srgb, var(--ink-faint) 10%, transparent); }
.ps-box.is-image { border-style: solid; }
/* The paragraphs a selected one flows into, numbered in their order. */
.ps-chain { position: absolute; border: 1.5px dashed var(--accent-strong); border-radius: var(--radius-sm); pointer-events: none; }
.ps-chain::before { content: attr(data-n); position: absolute; left: -1px; top: -1px; transform: translateY(-100%); padding: 0 4px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--accent-strong); color: white; font: 600 var(--text-2xs)/16px var(--font-mono); font-variant-numeric: tabular-nums; }
.ps-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; background: var(--accent-strong); cursor: nwse-resize; box-shadow: 0 0 0 1px var(--accent-strong); }
.ps-handle::after { content: ""; position: absolute; inset: -12px; }
.ps-editor { position: absolute; z-index: 5; margin: 0; padding: 0 1px; border: 1.5px solid var(--accent-strong); border-radius: var(--radius-sm); background: white; color: black; resize: none; overflow: hidden; white-space: pre; line-height: 1.2; outline: none; }
/* The same, in the panel, where a touch screen's 16-pixel type would not
   match the words on the page (pdfs-edit.js, startSheetEdit). */
.ps .ps-editor-sheet { min-height: 96px; white-space: pre-wrap; }
.ps-draw { position: absolute; border: 1.5px dashed var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; }
.ps-layer.is-drawing { cursor: crosshair; }
/* Comments: a box to click over each one, outlined when selected; the
   pen's stroke while it is drawn. */
.ps-cmt { position: absolute; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.ps-cmt:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.ps-cmt.is-sel { border: 1.5px solid var(--accent-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.ps-inkdraw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ps-inkdraw polyline { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ps-quote { margin: 0; padding-left: var(--space-2); border-left: 3px solid var(--rule-strong); color: var(--ink-soft); }
.ps-replies { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ps-replies li { padding: var(--space-2); border-radius: var(--radius-sm); background: var(--paper-inset); }
/* Merged comments that two people changed: each version, to choose. */
.ps-list li.ps-conflict { display: block; padding: var(--space-2); }
.ps-conflict p { margin: 0 0 var(--space-2); }
.ps-cf-choice { display: grid; gap: var(--space-2); }
.ps-cf-choice .btn { display: grid; justify-items: start; gap: 2px; width: 100%; height: auto; min-height: 44px; padding: var(--space-2); text-align: left; white-space: normal; }
.ps-cf-choice .btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.ps-cf-words { color: var(--ink-soft); font-weight: 400; overflow-wrap: anywhere; }
/* Pattern redaction over several files: a file's matches, folded. */
.ps-list li.ps-rdb-file { display: block; padding: 0; }
.ps-rdb-file summary { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 2px var(--space-2); cursor: pointer; }
.ps-rdb-file .ps-list { margin: 0 0 var(--space-2) var(--space-3); }
/* Scan clean-up: the page before and after, side by side. */
.ps-cleanup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0; }
.ps-cleanup figure { margin: 0; }
.ps-cleanup img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.ps-cleanup figcaption { font-size: var(--text-2xs); color: var(--ink-soft); }
.ps-list .ps-li-head { min-height: 0; padding-top: var(--space-2); color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ps-swatch-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--rule); }
/* Measuring: the shape being drawn, and the scale's row of fields. */
.ps-measdraw polyline, .ps-measdraw polygon { fill: color-mix(in srgb, var(--danger) 12%, transparent); stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ps-measdraw polyline { fill: none; }
.ps-cmt.ps-measbox { pointer-events: none; }
.ps-scale { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-2); align-items: center; }
.ps-scale span { grid-column: 1 / -1; color: var(--ink-soft); }
/* Signing: where the signature will go, the empty fields to sign in, and
   the file's signatures, each marked by what checking them found. */
.ps-sigplace, .ps-sigfield { position: absolute; display: flex; align-items: center; justify-content: center; padding: var(--space-1); border: 1.5px dashed var(--accent-strong); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 600; text-align: center; overflow: hidden; }
.ps-sigfield { cursor: pointer; border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.ps-sigfield.is-chosen { border-style: solid; background: color-mix(in srgb, var(--good) 22%, transparent); }
.ps-siglist { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ps-siglist li { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper-inset); }
.ps-siglist .ps-sig-ok { border-left-color: var(--good); }
.ps-siglist .ps-sig-later { border-left-color: var(--accent-strong); }
.ps-siglist .ps-sig-bad { border-left-color: var(--danger); }
.ps-siglist .ps-row { margin-top: var(--space-2); }
/* Optimise: where the bytes go, and the largest pictures. */
.ps-audit { width: 100%; border-collapse: collapse; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ps-audit th, .ps-audit td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.ps-audit th[scope="row"] { white-space: normal; }
.ps-audit th[scope="row"], .ps-audit thead th:first-child { text-align: left; font-weight: 400; color: var(--ink); }
.ps-audit thead th { color: var(--ink-faint); font-weight: 600; }
.ps-audit tfoot th, .ps-audit tfoot td { font-weight: 600; border-bottom: 0; }
.ps-audit-pics { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.ps-audit-pics li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); }
/* A calculated field's sources: the other fields, to tick. */
.ps-calc-from { display: grid; gap: 0; max-height: 180px; overflow-y: auto; margin: 0; padding: var(--space-1) var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.ps-calc-from[hidden], .ps label.ps-field[hidden], .ps-grid2[hidden] { display: none; }
.ps-calc-from legend { padding: 0 var(--space-1); color: var(--ink-soft); font-size: var(--text-2xs); }
.ps-calc-from .ps-check { margin: 0; overflow-wrap: anywhere; }
/* A signature's report: what was checked, the chain from the signer up,
   and the problems and notes. */
.ps-report { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.ps-report dt { color: var(--ink-faint); font-size: var(--text-xs); font-weight: 600; }
.ps-report dd { margin: 0; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.ps-report-h { margin: var(--space-2) 0 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.ps-chain { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; counter-reset: link; }
.ps-chain li { position: relative; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6); border-left: 3px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper-inset); overflow-wrap: anywhere; counter-increment: link; }
.ps-chain li::before { content: counter(link); position: absolute; left: var(--space-2); top: var(--space-2); color: var(--ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ps-chain li.is-anchor { border-left-color: var(--good); }
.ps-chain li.is-bad { border-left-color: var(--danger); }
.ps-report-list { margin: 0; padding-left: var(--space-5); color: var(--ink-soft); line-height: 1.5; }
.ps-trustlist li { align-items: flex-start; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.ps-trustlist .ps-li-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
@media (max-width: 520px) {
  .ps-report { grid-template-columns: minmax(0, 1fr); }
  .ps-report dd { margin-bottom: var(--space-1); }
}
/* Checks: each result marked passed, failed or for a person; figures
   outlined on the page, solid once described. */
.ps-checklist { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ps-checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.ps-ck-mark { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--rule-strong); }
.ps-ck-pass .ps-ck-mark { background: var(--good); }
.ps-ck-fail .ps-ck-mark { background: var(--danger); }
.ps-ck-manual .ps-ck-mark { background: var(--accent-strong); }
.ps-figmark { position: absolute; border: 1.5px dashed var(--danger); border-radius: var(--radius-sm); cursor: pointer; }
.ps-figmark.is-done { border-style: solid; border-color: var(--good); }
.ps-figmark.is-sel { box-shadow: 0 0 0 2px var(--accent-strong); }
/* Tags: the reading order numbered on the page, the tree, the order list. */
.ps-ordermark { position: absolute; border: 1.5px solid color-mix(in srgb, var(--accent-strong) 70%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 7%, transparent); cursor: pointer; }
.ps-ordermark::before { content: attr(data-n); position: absolute; left: -1px; top: -1px; min-width: 18px; padding: 0 4px; border-radius: var(--radius-sm) 0 var(--radius-sm) 0; background: var(--accent-strong); color: white; font: 600 var(--text-2xs)/16px var(--font-mono); text-align: center; font-variant-numeric: tabular-nums; }
.ps-ordermark.is-sel { border-width: 2px; border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ps-tagtree { margin: 0; padding: 0; list-style: none; max-height: 52vh; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.ps-tagtree li { margin: 0; }
.ps-tag-row { display: grid; grid-template-columns: 14px auto 1fr auto; align-items: baseline; gap: 6px; width: 100%; min-height: 32px; padding: 4px 8px 4px calc(8px + var(--depth, 0) * 14px); border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font: var(--text-xs)/1.35 var(--font-body); text-align: left; cursor: pointer; }
.ps-tag-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ps-tag-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ps-tagtree [aria-selected="true"] > .ps-tag-row { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ps-tag-twisty { color: var(--ink-soft); font-size: var(--text-2xs); text-align: center; }
.ps-tag-role { font: 600 var(--text-2xs)/1.4 var(--font-mono); letter-spacing: 0.03em; color: var(--accent-strong); white-space: nowrap; }
.ps-tag-std { font-weight: 400; color: var(--ink-soft); }
.ps-tag-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.ps-tag-page { color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-tag-moves .btn { flex: 1 1 0; min-width: 0; }
.ps-row-end { align-self: end; }
.ps-rolemap { display: grid; gap: 6px; margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.ps-rolemap li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.ps-order-nav { align-items: center; }
.ps-order-page { font-variant-numeric: tabular-nums; }
.ps-order { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ps-order li { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 44px; padding: 2px 4px 2px 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); cursor: grab; }
.ps-order li.is-sel { border-color: var(--accent-strong); }
.ps-order li.is-over { border-top: 2px solid var(--accent-strong); }
.ps-order li.is-drag { opacity: 0.5; }
.ps-order-n { font: 600 var(--text-2xs)/1 var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ps-order-moves { display: flex; }
.ps-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Redaction marks: what will go, outlined in the danger colour; a mark
   left out is dashed and faint. */
.ps-redmark { position: absolute; border: 1.5px solid var(--danger); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 22%, transparent); cursor: pointer; }
.ps-redmark.is-off { border-style: dashed; background: transparent; opacity: 0.6; }
.ps-redmark.is-sel { box-shadow: 0 0 0 2px var(--accent-strong); }
.ps-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ps-fld { position: absolute; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 600; overflow: hidden; white-space: nowrap; cursor: pointer; }
.ps-fld.is-sel { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 26%, transparent); }
.ps-fld.is-found { border-style: dashed; border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.ps-fld .ps-order { flex: none; min-width: 16px; padding: 0 3px; border-radius: var(--radius-sm); background: var(--accent-strong); color: white; text-align: center; }
.ps-fill { position: absolute; margin: 0; padding: 0 3px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: color-mix(in srgb, white 88%, var(--accent)); color: black; font-size: var(--text-xs); }
.ps-fill[type="checkbox"], .ps-fill[type="radio"] { accent-color: var(--accent-strong); }
.ps-mark { position: absolute; border-radius: var(--radius-sm); pointer-events: none; mix-blend-mode: multiply; }
.ps-mark.del { background: rgb(214 60 50 / 0.34); }
.ps-mark.ins { background: rgb(40 160 90 / 0.34); }
.ps-mark.chg { background: rgb(222 160 30 / 0.4); }
.ps-mark.is-now { box-shadow: 0 0 0 2px var(--accent-strong); }
.ps-ocrword { position: absolute; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }

/* ------------------------------------------------------------ the tool's panel */

.ps-side { min-height: 0; overflow-y: auto; scrollbar-width: thin; border-left: 1px solid var(--rule); background: var(--paper-raised); }
.ps-panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.ps-panel-head h2 { flex: 1 1 auto; margin: 0; font-size: var(--text-sm); font-weight: 650; }
.ps-panel-close { display: none; }
.ps-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--rule); }
.ps-sec:last-child { border-bottom: 0; }
.ps-sec > h3 { margin: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.ps-sec > p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.ps-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ps-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ps-note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--ink); line-height: 1.45; }
.ps-note.good { background: var(--good-soft); }
.ps-note:empty { display: none; }
.ps-list { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ps-list li { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 2px var(--space-2); border-radius: var(--radius-sm); transition: background-color var(--dur-2) var(--ease-standard); }
.ps-list li:hover { background: var(--paper-inset); }
.ps-list li[aria-current="true"] { background: var(--accent-soft); }
.ps-list li > button.ps-li-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.ps-list .ps-li-sub { margin-left: auto; color: var(--ink-faint); font-size: var(--text-2xs); white-space: nowrap; }
.ps-rd-code { font-family: var(--font-mono); color: var(--ink-soft); letter-spacing: 0.02em; }
.ps-list .ps-ib { width: 28px; height: 28px; }
.ps-list .ps-ib svg { width: 15px; height: 15px; }
.ps-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-tag { flex: none; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--paper-inset); color: var(--ink-soft); font-size: var(--text-2xs); }
.ps-preview { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: white; }
.ps-swatches { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ps-swatch { width: 26px; height: 26px; padding: 0; border: 2px solid var(--paper-raised); border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; }
.ps-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-strong); }

/* ------------------------------------------------------------ organise */

.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--space-4); padding: var(--space-5); }
.ps-card { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); border: 2px solid transparent; border-radius: var(--radius-md); background: none; cursor: grab; user-select: none; }
.ps-card canvas { max-width: 100%; height: auto; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.ps-card span { font-size: var(--text-2xs); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ps-card { transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.ps-card:hover { background: var(--paper-inset); }
.ps-card[aria-selected="true"] { border-color: var(--accent-strong); background: var(--accent-soft); }
.ps-card.is-drag { opacity: 0.4; }
.ps-card.drop-before::before, .ps-card.drop-after::after { content: ""; position: absolute; top: var(--space-2); bottom: var(--space-2); width: 3px; border-radius: var(--radius-pill); background: var(--accent-strong); }
.ps-card.drop-before::before { left: -9px; }
.ps-card.drop-after::after { right: -9px; }
.ps-tree { display: grid; gap: 1px; padding: var(--space-2); }
.ps-tree-item { display: flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-1); border-radius: var(--radius-sm); transition: background-color var(--dur-2) var(--ease-standard); }
.ps-tree-item:hover { background: var(--paper-inset); }
.ps-tree-item[aria-current="true"] { background: var(--accent-soft); }
.ps-tree-item button.ps-li-main { flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-tree-tools { display: flex; flex-wrap: wrap; gap: 2px; padding: var(--space-2); border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ compare */

.ps-cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
.ps-cmp-col { min-width: 0; }
.ps-cmp-head { position: sticky; top: 0; z-index: 3; margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-cmp .ps-page { margin-bottom: var(--space-3); }
.ps-overlay-wrap { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-4); }
.ps-overlay-wrap canvas { max-width: 100%; height: auto; background: white; box-shadow: 0 1px 4px rgb(0 0 0 / 0.28); }
.ps-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--ink-soft); }
.ps-legend i { display: inline-block; width: 12px; height: 12px; margin-right: var(--space-1); border-radius: var(--radius-sm); vertical-align: -1px; }
.ps-cmp-ignore { margin: var(--space-3) 0 0; padding: 0; border: 0; min-width: 0; }
.ps-cmp-ignore legend { padding: 0; margin-bottom: var(--space-1); color: var(--ink-soft); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; }
.ps-legend .del { background: rgb(214 60 50 / 0.6); }
.ps-legend .ins { background: rgb(40 160 90 / 0.6); }
.ps-legend .chg { background: rgb(222 160 30 / 0.7); }

/* ------------------------------------------------------------ batch */

.ps-batch { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(240px, 320px); gap: var(--space-4); padding: var(--space-4); align-items: start; }
.ps-card-box { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.ps-card-box > h2 { margin: 0; font-size: var(--text-sm); font-weight: 650; }
.ps-step { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.ps-step-head { display: flex; align-items: center; gap: var(--space-2); }
.ps-step-head b { flex: 1 1 auto; }
.ps-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 700; }
.ps-file-state { font-size: var(--text-2xs); color: var(--ink-faint); }
.ps-file-state.done { color: var(--good); }
.ps-file-state.fail { color: var(--danger); }
.ps-addstep { justify-content: flex-start; width: 100%; text-align: left; }
.ps-wide { flex: 1 1 200px; }
.ps-stack { display: grid; gap: var(--space-2); }

/* ------------------------------------------------------------ find */

/* The find bar, over the top right of the document; every match marked in
   a layer of its own that lets clicks through to the tool below. */
.ps-findbar { position: absolute; z-index: 20; top: var(--space-2); right: var(--space-4); display: flex; align-items: center; gap: 2px; max-width: calc(100% - 2 * var(--space-2)); padding: var(--space-1); border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 8px 24px -12px rgb(0 0 0 / 0.4); }
.ps-findbar[hidden] { display: none; }
.ps-findbar.is-replacing { flex-wrap: wrap; }
.ps-find-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.ps-find-rep { display: flex; flex: 1 0 100%; align-items: center; gap: var(--space-1); padding: var(--space-1) 0 0 calc(var(--ps-hit) + 2px); }
.ps-find-rep[hidden] { display: none; }
.ps .ps-find-rep input[type="text"] { width: 220px; min-width: 0; flex: 1 1 auto; }
.ps-find-rep .btn { min-height: var(--ps-hit); padding: 4px 10px; white-space: nowrap; }
.ps .ps-findbar input[type="search"] { width: 220px; min-width: 0; flex: 1 1 auto; }
.ps-find-count { min-width: 64px; padding: 0 var(--space-2); color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ps-find-count[data-none="true"] { color: var(--warn); }
.ps-find-opt { width: auto; min-width: var(--ps-hit); padding: 0 var(--space-1); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: 0.02em; }
.ps-findlayer { position: absolute; inset: 0; pointer-events: none; }
.ps-findhit { position: absolute; border-radius: var(--radius-sm); background: rgb(250 200 40 / 0.42); mix-blend-mode: multiply; }
.ps-findhit.is-now { background: rgb(245 130 20 / 0.55); box-shadow: 0 0 0 1.5px rgb(200 90 0); }

/* ------------------------------------------------------------ dialogs of choices */

/* Sanitise: each kind of thing a file can hold, with how many were found
   and a line on what taking it out means. */
.ps-sz { gap: var(--space-2); }
.ps label.ps-check.ps-sz-row { align-items: flex-start; }
.ps-sz-row input { margin-top: 3px; flex: none; }
.ps-sz-row > span { display: grid; gap: 2px; min-width: 0; }
.ps-sz-n { color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.ps-sz-row input:disabled ~ span { color: var(--ink-faint); }

/* Crop: the page with the box that will be kept, its edges to drag. */
.ps-crop { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ps-crop-view { display: grid; gap: var(--space-2); justify-items: start; }
.ps-crop-page { position: relative; overflow: hidden; touch-action: none; cursor: crosshair; }
.ps-crop-page canvas { display: block; max-width: 100%; height: auto; background: white; box-shadow: 0 0 0 1px var(--rule); }
.ps-crop-box { position: absolute; border: 1.5px solid var(--accent-strong); box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.38); pointer-events: none; }
@media (max-width: 620px) {
  .ps-crop { grid-template-columns: minmax(0, 1fr); }
}

/* Plug-ins: each with Run, its code to read, and Remove. */
.ps-plug-list li { align-items: center; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.ps-plug-list .btn { flex: none; }
.ps .ps-plug-code { min-height: 200px; font: var(--text-2xs)/1.5 var(--font-mono); white-space: pre; overflow: auto; }
.ps label.ps-field.ps-plug-ex { flex: 1 1 200px; }
.ps-plug-doc { margin: 0; padding: var(--space-2) var(--space-3); overflow-x: auto; border-radius: var(--radius-sm); background: var(--paper-inset); font: var(--text-2xs)/1.6 var(--font-mono); color: var(--ink); }
.ps-form code { font: 0.92em var(--font-mono); }
.ps-hint.ps-mono { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.02em; }

/* Spelling: the marks over the text being typed, the words and their
   suggestions under it, and the dialog. */
.ps-spell-back { position: absolute; z-index: 6; margin: 0; border-style: solid; border-color: transparent; color: transparent; background: none; overflow: hidden; pointer-events: none; }
.ps-spell-mark { text-decoration: underline wavy var(--danger); text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-skip-ink: none; }
.ps-spell-list { position: absolute; z-index: 7; display: grid; gap: 4px; max-width: min(520px, 90vw); padding: var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); font: var(--text-xs)/1.4 var(--font-body); }
.ps-spell-list.is-static { position: static; margin-top: var(--space-2); }
.ps-spell-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ps-spell-bad { font-weight: 600; text-decoration: underline wavy var(--danger); text-decoration-thickness: 1px; text-underline-offset: 3px; margin-right: 4px; overflow-wrap: anywhere; }
.ps-spell-pick { min-height: 32px; padding: 2px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.ps-spell-pick:hover { border-color: var(--accent); }
.ps-spell-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-spell-pick[aria-selected="true"] { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.ps-spell-add { color: var(--ink-soft); }
.ps-spell { display: grid; gap: var(--space-3); }
.ps-spell[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.ps-spell-count { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ps-spell-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--text-lg); }
.ps-spell-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
@media (pointer: coarse) { .ps-spell-pick, .ps-tag-row { min-height: 44px; } }

/* Print: the pages as SVG (their own text and drawings) or as pictures,
   each on a sheet of its own size, which only the printer sees. */
.ps-print { display: none; }
@media print {
  body.ps-printing { display: block; height: auto; overflow: visible; background: white; }
  body.ps-printing > :not(.ps-print) { display: none !important; }
  body.ps-printing > .ps-print { display: block; }
  .ps-print-page { break-after: page; overflow: hidden; }
  .ps-print-page:last-child { break-after: auto; }
  .ps-print-page img, .ps-print-page svg { display: block; width: 100%; height: 100%; }
}

/* ------------------------------------------------------------ status */

.ps-status { display: flex; align-items: center; gap: var(--space-3); min-height: 30px; padding: 0 150px 0 var(--space-3); border-top: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-soft); font-size: var(--text-2xs); white-space: nowrap; overflow: hidden; }
.ps-status > #psSay { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ps-status [data-kind="warn"] { color: var(--warn); }
/* A long job: the bar fades in and fills to the fraction done (pdfs-app.js
   sets --p), as a scale rather than a width, so it costs no layout. */
.ps-progress { --os-fade: var(--dur-fade); display: inline-flex; align-items: center; gap: var(--space-2); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
.ps-progress[hidden] { display: none; }
.ps-bar { display: inline-block; width: 140px; height: 6px; border-radius: var(--radius-pill); background: var(--paper-inset); overflow: hidden; }
.ps-bar > span { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left; scale: var(--p, 0) 1; transition: scale var(--dur-2) var(--ease-standard); }
.ps-zoom { display: inline-flex; align-items: center; gap: 2px; }
.ps-zoom .ps-ib { width: 26px; height: 26px; }
.ps-zoom-val { min-width: 52px; min-height: 26px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; cursor: pointer; }
.ps-zoom-val:hover { background: var(--paper-inset); }

/* ------------------------------------------------------------ dialogs */

.ps-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -30px rgb(0 0 0 / 0.55); }
.ps-dialog.is-wide { width: min(760px, calc(100vw - 32px)); }
.ps-form { display: grid; gap: var(--space-3); padding: var(--space-5); }
.ps-form h2 { margin: 0; font: 600 var(--text-xl)/1.2 var(--font-headline); }
.ps-form p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.ps-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.ps-keys { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.ps-keys dt { font-family: var(--font-mono); color: var(--ink); }
.ps-keys dd { margin: 0; color: var(--ink-soft); }
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table th, .ps-table td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ps-table th { font-size: var(--text-2xs); color: var(--ink-faint); font-weight: 600; }

/* ------------------------------------------------------------ narrower */

@media (max-width: 1100px) {
  .ps { --ps-nav: 168px; --ps-side: 280px; }
  .ps-thumb { width: 108px; }
  .ps-batch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ps-batch > :last-child { grid-column: 1 / -1; }
}
/* A phone: the bar wraps under the name, the side panels are sheets over
   the document that the bar's buttons bring up, and everything a finger
   presses is 44 pixels. */
@media (max-width: 760px) {
  .ps-top { row-gap: 2px; padding: 6px 6px 4px; }
  /* The mark, Undo, Redo, Open in and Save on the first row, the menus on
     the second and the tools on the third, each no taller than a finger:
     with the name beside the mark, Save had a row to itself and the bars
     came to two hundred pixels before the page. The name is the mark's
     own label. */
  .ps-brand { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ps-tools { padding: 2px var(--space-2); }
  .ps-menubar { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ps-menubar::-webkit-scrollbar { display: none; }
  .ps-drop { position: fixed; top: auto; left: var(--space-2); right: var(--space-2); min-width: 0; max-height: 60vh; overflow-y: auto; }
  .ps-docname { display: none; }
  .ps-main, .ps-main.no-nav, .ps-main.no-side, .ps-main.no-nav.no-side, .ps-main.is-view, .ps-main.is-view.no-side { grid-template-columns: minmax(0, 1fr); }
  .ps-main > .ps-nav, .ps-main > .ps-side { position: absolute; z-index: 30; visibility: visible; box-shadow: 0 12px 36px rgb(0 0 0 / 0.3); }
  .ps-main > .ps-nav { top: 0; bottom: 0; left: 0; width: min(240px, 80vw); }
  .ps-main > .ps-side { left: 0; right: 0; bottom: 0; max-height: 62%; border-left: 0; border-top: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ps-main.no-nav > .ps-nav, .ps-main.is-view > .ps-nav, .ps-main.no-side > .ps-side { display: none; }
  .ps-panel-close { display: inline-flex; }
  .ps-stage { grid-column: 1; }
  .ps-pages { padding: max(var(--space-3), var(--ps-no)) var(--space-2) var(--space-7); }
  .ps-cmp { grid-template-columns: minmax(0, 1fr); }
  .ps-batch { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
  .ps-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); padding: var(--space-3); gap: var(--space-2); }
  .ps-bar { width: 72px; }
  .ps-pageno { display: none; }
  .ps-status { padding-right: var(--space-2); }
  .ps-findbar { left: var(--space-2); right: var(--space-2); top: var(--space-1); flex-wrap: wrap; }
  .ps .ps-findbar input[type="search"] { width: auto; flex: 1 1 calc(100% - var(--ps-hit) - 4px); }
  .ps-find-rep { padding-left: 0; flex-wrap: wrap; }
  .ps .ps-find-rep input[type="text"] { width: 100%; flex: 1 1 100%; }
  .ps-find-rep .btn { flex: 1 1 0; }
  .ps-find-count { flex: 1 1 auto; text-align: left; }
  /* In the status bar, at its left, where a phone has room: it floated
     over the page above the bar, on top of whatever was drawn there. */
  body.ps-app #ppBadge { left: var(--space-2); right: auto; bottom: 2px; min-height: 44px; }
  .ps-status { padding-left: 76px; }
}
@media (pointer: coarse) {
  .ps { --ps-hit: 44px; }
  .ps-menu > summary { justify-content: center; }
  .ps-menu > summary, .ps-tools button, .ps-seg button, .ps-findbar .ps-ib, .ps .btn, .ps-save, .ps-zoom .ps-ib, .ps-textsel, .ps-zoom-val, .ps-list .ps-ib, .ps-thumb, .ps-link, .ps label.ps-check, .ps-swatch, .ps-drop button, .ps-drop a, .ps-list li > button.ps-li-main, .ps-tree-item button.ps-li-main, .ps-rdb-file summary { min-height: 44px; min-width: 44px; }
  .ps input[type="text"], .ps input[type="number"], .ps input[type="password"], .ps input[type="search"], .ps select { min-height: 44px; }
  .ps input[type="color"] { width: 44px; height: 44px; }
  .ps-opt input[type="checkbox"], .ps label.ps-check input { width: 22px; height: 22px; }
  .ps-status { min-height: 48px; }
  .ps-handle { width: 18px; height: 18px; right: -9px; bottom: -9px; }
}
/* Numbers typed in a dialog line: a few digits wide, not the whole row. */
.ps-num { width: 5em; }
.ps-num.ps-num-wide { width: 6em; }
.ps-pad { padding: var(--space-3); }
/* The button that brings the panel up as a sheet, on a phone only. At the
   class's own weight the site's .btn rule (.ps .btn, above) outweighed
   this and the button sat in every desktop's options row, offering a
   panel that was already open. */
.ps .ps-side-open { display: none; }
@media (max-width: 760px) {
  .ps .ps-side-open { display: inline-flex; margin-left: auto; }
}

/* Fill and sign (pdfs-fill.js): what is about to be put on the page,
   following the pointer; the words being typed where they go; and the
   signature pad. The signature shows on white whatever the theme, as it
   will on the page. */
.ps-fill-ghost { position: absolute; pointer-events: none; opacity: 0.6; white-space: pre; font-family: Helvetica, Arial, sans-serif; line-height: 1; outline: 1px dashed var(--accent-strong); outline-offset: 2px; }
.ps-fill-ghost img, .ps-fill-ghost svg { display: block; width: 100%; height: 100%; }
.ps-fill-type { position: absolute; z-index: 2; min-width: 4em; margin: 0; padding: 2px 3px; border: 1.5px solid var(--accent-strong); border-radius: var(--radius-sm); background: var(--print-paper); font-family: Helvetica, Arial, sans-serif; line-height: 1.2; white-space: pre; overflow: hidden; resize: none; }
.ps-fill-type:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.ps-fill-tabs { justify-self: start; }
.ps-fill-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.ps-fill-pane { display: grid; gap: var(--space-2); }
.ps-fill-pane[hidden] { display: none; }
.ps-fill-pad { display: block; width: 100%; height: 170px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--print-paper); cursor: crosshair; touch-action: none; }
.ps-fill-typed { display: flex; align-items: center; min-height: 72px; padding: var(--space-2) var(--space-3); overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--print-paper); color: var(--print-ink); font: italic 400 var(--text-3xl) "Source Serif 4", Georgia, serif; white-space: nowrap; }
.ps-fill-shown { display: flex; align-items: center; min-height: 56px; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--print-paper); }
.ps-fill-shown:empty { display: none; }
.ps-fill-shown img { display: block; max-width: 100%; max-height: 64px; }
@media (max-width: 760px) {
  .ps-fill-tabs button { min-height: 44px; }
  .ps-fill-pad { height: 150px; }
}

/* Select text (pdfs-app.js): the page's words, invisible, where they are
   drawn, above the tool's marks while it is on. */
.ps-text { position: absolute; inset: 0; display: none; overflow: hidden; line-height: 1; }
.ps-main.is-text .ps-text { display: block; z-index: 2; cursor: text; }
.ps-main.is-text .ps-layer { pointer-events: none; visibility: hidden; }
.ps-text span { position: absolute; white-space: pre; color: transparent; font-family: sans-serif; transform-origin: 0 0; }
.ps-text ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: transparent; }
/* A line's end is a <br> at the layer's corner: it is copied, not shown. */
.ps-text br::selection { background: transparent; }
.ps-textsel { width: 26px; height: 26px; }
.ps-textsel[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
/* On a phone the status line has no room for it, as before. */
@media (min-width: 761px) { .ps-pageno { display: inline-flex; align-items: center; gap: var(--space-1); } }
.ps .ps-pageno input { box-sizing: content-box; min-width: 2ch; height: 20px; min-height: 0; margin: 0; padding: 0 4px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; line-height: 20px; text-align: center; }
.ps .ps-pageno input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .ps .ps-pageno input { box-sizing: border-box; min-width: 44px; height: 44px; } }
.ps-selbar { position: absolute; z-index: 4; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), var(--elev-2, 0 12px 32px rgb(0 0 0 / 0.18)); white-space: nowrap; }
.ps-selbar button { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 30px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-size: var(--text-2xs); cursor: pointer; }
.ps-selbar button:hover { background: var(--paper-inset); }
.ps-selbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ps-selbar svg { width: 16px; height: 16px; }
@media (pointer: coarse) { .ps-selbar button { min-height: 44px; min-width: 44px; justify-content: center; } }
@media (max-width: 760px) { .ps-selbar span { display: none; } }
/* A drag that starts on the page and runs off it selects words, not the
   application's own labels. */
.ps-top, .ps-tools, .ps-opts, .ps-status, .ps-nav, .ps-page-no { -webkit-user-select: none; user-select: none; }
.ps-opts input, .ps-status input { -webkit-user-select: text; user-select: text; }


/* A form's empty signature field, in Fill and sign: it takes the signature. */
.ps-sighere { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 0 var(--space-2); overflow: hidden; border: 1.5px dashed var(--accent-strong); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-strong); font: 600 var(--text-2xs) var(--font-ui); white-space: nowrap; cursor: pointer; }
.ps-sighere:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ps-sighere:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-sighere svg { width: 16px; height: 16px; }
.ps-pages { touch-action: pan-x pan-y; }

/* The thumbnails' own menu and dragging (pdfs-thumbs.js). The menu is the
   menubar's, opened where the page was right-clicked. */
.ps-ctx { position: fixed; top: 0; left: 0; z-index: 70; min-width: 240px; }
.ps-ctx-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.ps-ctx-label svg { width: 16px; height: 16px; color: var(--ink-soft); }
.ps-thumb.is-dragging { opacity: 0.45; }
.ps-thumb-slot { position: absolute; left: var(--space-3); right: var(--space-3); height: 3px; margin-top: -1px; border-radius: var(--radius-sm); background: var(--accent-strong); pointer-events: none; }
html.ps-dragging, html.ps-dragging * { cursor: grabbing !important; }
.ps-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* View, Two pages side by side and Dark pages (pdfs-app.js). */
.ps-pages.is-two:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: 16px; }
.ps-pages.is-two .ps-page { margin: 0 0 max(var(--space-4), var(--ps-no)); }
.ps-pages.is-dark .ps-page { background: var(--print-ink); }
.ps-pages.is-dark .ps-page > canvas { filter: invert(0.92) hue-rotate(180deg); }
.ps-drop button[role="menuitemcheckbox"]::after { content: ""; flex: none; align-self: center; width: 10px; height: 5px; border: solid transparent; border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.ps-drop button[aria-checked="true"]::after { border-color: var(--accent-strong); }
/* The document's links, while Select text is on. */
.ps-textlink { position: absolute; z-index: 1; border-radius: var(--radius-sm); cursor: pointer; }
.ps-textlink:hover, .ps-textlink:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); outline: 1px solid var(--accent); }

/* Full screen (pdfs-show.js): the page alone, on black. */
.ps-show { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0); outline: none; overflow: hidden; touch-action: none; }
.ps-show[hidden] { display: none; }
.ps-show-page { display: block; background: var(--print-paper); }
.ps-show-count { position: absolute; right: var(--space-4); bottom: var(--space-3); margin: 0; color: rgb(255 255 255 / 0.72); font: 500 var(--text-2xs) var(--font-mono); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--dur-fade) linear; pointer-events: none; }
.ps-show-count.is-shown { opacity: 1; }
html.ps-showing, html.ps-showing body { overflow: hidden; }

/* Combine files (pdfs-combine.js): the files in the order they are joined. */
.ps-cb { max-height: min(52vh, 420px); overflow-y: auto; margin: var(--space-2) 0 var(--space-3); padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.ps-cb li { min-height: 44px; }
.ps-cb-n { flex: none; min-width: 2ch; color: var(--ink-faint); font: 500 var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.ps-cb-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ps-cb-sub { color: var(--ink-faint); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.ps-cb-gap { flex: none; width: 28px; }
@media (pointer: coarse) { .ps-cb-gap { width: 44px; } }
@media (max-width: 760px) {
  .ps-cb li { gap: var(--space-1); padding-right: 0; }
  .ps-cb .ps-ellipsis { white-space: normal; overflow-wrap: anywhere; }
}

/* Cropping a picture (pdfs-edit.js). */
.ps-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ps-crop { display: flex; justify-content: center; margin: var(--space-2) 0; padding: var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); }
.ps-crop canvas { display: block; max-width: 100%; height: auto; cursor: crosshair; touch-action: none; }
@media (max-width: 760px) { .ps-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Bookmarks from the headings (pdfs-organise.js). */
.ps-hd-list { max-height: min(50vh, 380px); overflow-y: auto; margin: var(--space-2) 0 var(--space-3); padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.ps-hd-how { display: grid; gap: var(--space-1); }

/* Finding a comment (pdfs-comments-ui.js). */
.ps-cm-find { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
.ps .ps-cm-find input[type="search"] { width: 100%; }

/* Remove blank pages (pdfs-organise.js). */
.ps-blanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); max-height: min(55vh, 440px); overflow-y: auto; margin: var(--space-2) 0; padding: var(--space-1); list-style: none; }
.ps-blanks label { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-md); cursor: pointer; }
.ps-blanks label:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); }
.ps-blanks img { display: block; max-width: 100%; height: 120px; object-fit: contain; background: var(--print-paper); box-shadow: 0 0 0 1px var(--rule); }
.ps-blanks span { font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.ps-blanks input { min-width: 20px; min-height: 20px; }

/* Your details in Fill and sign (pdfs-fill.js). */
.ps-fill-details { display: grid; gap: var(--space-1); margin-bottom: var(--space-1); }
.ps .ps-fill-details .btn { justify-content: flex-start; min-width: 0; font-weight: 500; }

/* In Windows high contrast a swatch keeps the colour it offers: with the
   system's fill it would be an empty circle (details.css has the rest). */
@media (forced-colors: active) {
  .ps-swatch, .ps-swatch-dot { forced-color-adjust: none; }
}

/* ------------------------------------------- motion inside the window
   (30 October 2026.) The window arrived by fading, and then nothing in it
   moved: a tool's options and its panel, a view taking the middle over,
   the thumbnails, the pages where the drop zone was, a dialog, the find
   bar, a new comment in its list and a redaction mark all appeared in one
   frame. Each now arrives as the rest of the site's things do (theme.css,
   MOTION): the options row and a panel's head fade in over --dur-2 and
   the panel's body rises a little over --dur-3 when the tool changes
   (pdfs-app.js, A.fresh); a view of a tool's own fades in over --dur-3
   and its cards deal out a --stagger apart; a thumbnail that was not
   there before rises into the strip, a document's dealt a step apart
   (pdfs-app.js marks them is-new and counts them in --deal); the pages
   fade in over the stage; the start screen's parts deal in a step apart;
   a dialog rises in over --dur-3 and fades out over --dur-3-out while the
   dim behind it does the same; the find bar, the thumbnails' menu and the
   selection's bar come in as menus do; a comment and a redaction mark
   that were not there before rise or pop into place; the status line and
   the zoom readout fade when their words change; and the words of a page
   drawn settle from the stand-in's grey. Every distance is one of
   theme.css's, nought with motion switched down, and everything that
   arrives asks for the fade it keeps then. */
.ps-opts.is-fresh, .ps-side > .ps-panel-head.is-fresh { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
.ps-side > .is-fresh:not(.ps-panel-head) { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.ps-view.is-fresh { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.ps-view.is-fresh .ps-card, .ps-thumb.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)); }
.ps-pages.is-arriving { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-4) var(--ease-standard) backwards; }
.ps-thumbs:not([hidden]), .ps-marks:not([hidden]), .ps-attach:not([hidden]) { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
/* The start screen: the mark, the heading, the line and the buttons, a
   step apart (--os-step is the title block's step on every page). */
.ps-drop-zone > * { --os-fade: var(--dur-fade); animation: os-rise var(--dur-4) var(--ease-emph) backwards; }
.ps-drop-zone > :nth-child(2) { animation-delay: var(--os-step); }
.ps-drop-zone > :nth-child(3) { animation-delay: calc(var(--os-step) * 2); }
.ps-drop-zone > :nth-child(n+4) { animation-delay: calc(var(--os-step) * 3); }
/* Dialogs: up over --dur-3, and out over --dur-3-out on the exit curve
   before the element closes (pdfs-app.js waits for the end). */
.ps-dialog[open] { --os-fade: var(--dur-fade); animation: os-rise var(--dur-3) var(--ease-standard) backwards; }
.ps-dialog[open]::backdrop { background: rgb(0 0 0 / 0.45); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
.ps-dialog[open].is-closing { animation: os-fade-out var(--dur-3-out) var(--ease-exit) forwards; }
.ps-dialog[open].is-closing::backdrop { animation: os-fade-out var(--dur-3-out) var(--ease-exit) forwards; }
.ps-ctx, .ps-findbar:not([hidden]) { --os-fade: var(--dur-fade); animation: os-menu-in var(--dur-3) var(--ease-standard) backwards; }
.ps-selbar, .ps-redmark.is-new { --os-fade: var(--dur-fade); animation: os-pop var(--dur-2) var(--ease-spring) backwards; }
.ps-spell-list:not(.is-static) { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.ps-list li.is-new { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; }
.ps-status > #psSay.is-fresh, .ps-zoom-val.is-fresh { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
/* On a phone the panels are sheets: the tool's rises from the foot of
   the screen over --dur-4, the pages' fades in at the left, and the
   panel's own parts keep still inside them. */
@media (max-width: 760px) {
  .ps-main:not(.no-side) > .ps-side { --os-fade: var(--dur-fade); animation: os-rise var(--dur-4) var(--ease-emph) backwards; }
  .ps-main:not(.no-nav):not(.is-view) > .ps-nav { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-3) var(--ease-standard) backwards; }
  .ps-side > .is-fresh { animation: none; }
}
/* Marks on the page ease their colour under the pointer and when chosen. */
.ps-box, .ps-cmt, .ps-redmark, .ps-fld, .ps-figmark, .ps-ordermark, .ps-sighere { transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); }