/* 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);
  animation: ps-arrive var(--dur-4) var(--ease-standard) both;
}
@keyframes ps-arrive { from { opacity: 0; } }
.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: var(--space-1) var(--space-2); 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: var(--ps-hit); height: 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-2) 0 0; font-size: var(--text-sm); font-weight: 650; 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 { font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.ps-saved[data-state="dirty"]::before { content: "\25CF  "; color: var(--accent-strong); }
.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; }

/* ------------------------------------------------------------ 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); }
.ps-tools button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); font-weight: 600; }
.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); }
.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; }
.ps .btn { min-height: 34px; }

/* ------------------------------------------------------------ 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[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 { 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); }
.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); color: var(--ink-soft); }
.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); }
.ps-pages { flex: 1 1 auto; overflow: auto; padding: var(--space-5) var(--space-4) var(--space-8); outline: none; }
.ps-pages[hidden], .ps-view[hidden], .ps-empty[hidden] { display: none; }
.ps-page { position: relative; margin: 0 auto var(--space-4); background: white; box-shadow: 0 1px 4px rgb(0 0 0 / 0.28); }
.ps-page > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-page.is-pending > canvas { opacity: 0.35; }
.ps-layer { position: absolute; inset: 0; }
.ps-page-no { position: absolute; left: 0; right: 0; top: 100%; padding-top: 2px; text-align: center; font-size: var(--text-2xs); 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: 700 var(--text-xl)/1.2 var(--font-headline); }
.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); }
.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); color: var(--ink-soft); }
.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); }
.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 .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); }
.ps-progress { display: inline-flex; align-items: center; gap: var(--space-2); }
.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: 0; height: 100%; background: var(--accent); transition: width 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); 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 { padding: var(--space-1); }
  /* 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: var(--space-3) 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: 100%; flex: 1 1 100%; }
  .ps-find-count { flex: 1 1 auto; text-align: left; }
  body.ps-app #ppBadge { left: auto; right: var(--space-3); bottom: 60px; min-height: 44px; }
}
@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-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. */
.ps-side-open { display: none; }
@media (max-width: 760px) {
  .ps-side-open { display: inline-flex; margin-left: auto; }
}