/* ==========================================================================
   The docs room -- the chalk archive.

   Everything shared comes from elsewhere: `styles.css` for the components --
   the shell, the bar, the panel head, the pills, the buttons -- and
   `themes.css` for what this room is made of, which is paper. Nothing shared
   is redefined here; every rule is scoped to one of this room's own faces,
   which are all called `docs-…`, so nothing in this file can reach another
   room. `npm run check` refuses a bare class selector that is also a
   component in styles.css.

   What is here is what only this room has: the two halves of the island you
   arrive at, the kinds of paper, and the desks each kind is worked on.
   ========================================================================== */

/* The document face: the type of what you write, not of the interface.
   Liberation Sans, already served for PDF.js under the OFL, metrically the
   same as Helvetica and Arial -- so a page measures the same here, in the PDF
   written from it and in Word. Loaded only when a document uses it. */
@font-face {
  font-family: "Docs Sans";
  src: url("/vendor/pdfjs/standard_fonts/LiberationSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Docs Sans";
  src: url("/vendor/pdfjs/standard_fonts/LiberationSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Docs Sans";
  src: url("/vendor/pdfjs/standard_fonts/LiberationSans-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Docs Sans";
  src: url("/vendor/pdfjs/standard_fonts/LiberationSans-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* The page itself is paper whatever the room around it is doing, and the
   ink on it is the document's, not the interface's. These four are the only
   colours in this file that are not tokens from the room, and they are not
   interface: they are what a printed page looks like. */
[data-face^="docs-"] {
  --paper: #FFFEFB;
  --paper-ink: #1D1B18;
  --paper-ink-2: rgba(29, 27, 24, 0.75);
  --paper-ink-3: rgba(29, 27, 24, 0.64);
  --paper-mark: rgba(29, 27, 24, 0.36);
  --paper-rule: rgba(29, 27, 24, 0.14);
  --paper-tint: rgba(29, 27, 24, 0.05);
  --paper-under: #E9E3D6;
  --paper-link: #1F4E8C;
  --paper-cell: #BFB8AA;
  --paper-head: #F2EDE3;
  --paper-head-on: #E4DCCB;
  --paper-light: rgba(255, 255, 255, 0.7);
  --paper-shadow: rgba(34, 30, 25, 0.16);
  /* The room's ink blue as it is used on a page: a line, a wash. */
  --paper-signal-line: rgba(60, 90, 120, 0.45);
  --paper-signal-wash: rgba(60, 90, 120, 0.1);
}

/* --- how this room's faces arrive ------------------------------------------

   Every other room's working face rises into place. Paper does not rise; it
   is laid down. So a face here opens down from its top edge, the same hinge
   the room's arrival uses, and lands flat. */
.face[data-face^="docs-"].is-rising {
  animation-name: docs-unfold;
  transform-origin: 50% 0;
}
@keyframes docs-unfold {
  from { opacity: 0; transform: perspective(1200px) rotateX(-10deg); }
  45%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* --- widths ---------------------------------------------------------------- */

.stage[data-state="docs-new"] .shell   { width: min(100%, 900px); }
.stage[data-state="docs-pdf"] .shell,
.stage[data-state="docs-sheets"] .shell,
.stage[data-state="docs-slides"] .shell { width: min(100%, 1180px); }
.stage[data-state="docs-writer"] .shell { width: min(100%, 1060px); }

/* ==========================================================================
   The island you arrive at: one sheet, two halves, a crease between.
   ========================================================================== */

/* At rest every other island is glass -- the raised tint over the film --
   and a sheet of paper is not glass. So the archive's resting island is
   the same paper as its open one: the colour is the room's material, the
   shape and everything inside it are the building's. */
.stage[data-state="docs-idle"] .shell { background-color: var(--film-shell); }
/* A little wider than the building's resting bar: it holds two choices,
   each with its words, rather than one line and a knob. */
.stage[data-state="docs-idle"] .shell { width: min(100%, 700px); }

.face[data-face="docs-idle"] .docs-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  cursor: default;
}
/* The whole bar does not answer the pointer here; each half does, because
   each half is its own choice. */
.face[data-face="docs-idle"] .bar.docs-entry:hover { background: none; }

.face[data-face="docs-idle"] .docs-entry__half {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  min-height: var(--rest-height);
  padding: 0 var(--s4) 0 var(--s1);
  font: inherit;
  color: var(--film-ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--rest-bar-radius);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease),
              transform var(--dur-state) var(--ease),
              box-shadow var(--dur-state) var(--ease);
}
.face[data-face="docs-idle"] .docs-entry__half:hover {
  background: var(--react-bar-hover);
  transform: translateY(var(--react-rise-y));
  box-shadow: var(--react-lift);
}
.face[data-face="docs-idle"] .docs-entry__half:active {
  transform: translateY(0) scale(var(--react-press));
  box-shadow: none;
}
.face[data-face="docs-idle"] .docs-entry__half:focus-visible {
  outline: 2px solid var(--film-ink);
  outline-offset: -2px;
}

/* The knob is a picture of the action rather than a separate control here:
   the whole half is the button. */
.face[data-face="docs-idle"] .docs-entry__knob {
  width: 40px; height: 40px;
  pointer-events: none;
}
.face[data-face="docs-idle"] .docs-entry__half:hover .docs-entry__knob { background: var(--knob-face-hi); }

.face[data-face="docs-idle"] .docs-entry__word {
  font-weight: 600;
  font-size: var(--t-base);
  white-space: nowrap;
}
.face[data-face="docs-idle"] .docs-entry__hint {
  min-width: 0;
  font-size: var(--t-xs);
  color: var(--film-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The crease: a fold in the sheet rather than a divider drawn on it -- a
   dark line with a light one beside it, which is what a fold catching the
   light looks like. */
.face[data-face="docs-idle"] .docs-entry__crease {
  width: 2px;
  margin: var(--s2) var(--s2);
  background: linear-gradient(90deg, var(--film-rule) 0 50%, var(--paper-light) 50% 100%);
}

.face[data-face="docs-idle"] .docs-refusal {
  margin: var(--s2) var(--s3) var(--s1);
  font-size: var(--t-sm);
  color: var(--film-bad);
}

@media (max-width: 560px) {
  .face[data-face="docs-idle"] .docs-entry__hint { display: none; }
  .face[data-face="docs-idle"] .docs-entry__half { padding-right: var(--s2); gap: var(--s2); }
}

/* ==========================================================================
   Create new: the kinds of paper, each drawn at its own proportions.
   ========================================================================== */

.face[data-face="docs-new"] .docs-new__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}
/* The name alone now (what it means is its tip), so it sits on the back
   button's middle rather than its top. */
.face[data-face="docs-new"] .panel__head { align-items: center; }

/* Columns sized by the paper they hold: a portrait sheet is narrower than a
   16:9 slide, so the grid gives it less room rather than four equal boxes. */
.face[data-face="docs-new"] .kinds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 0.95fr 0.9fr 1.2fr 1.1fr 0.85fr;
  gap: var(--s4);
  border-top: var(--hairline) solid var(--film-rule);
  padding-top: var(--s4);
}

.face[data-face="docs-new"] .kind__pick {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 84px auto 1fr;
  align-items: end;
  gap: var(--s2);
  padding: var(--s3) var(--s3) var(--s4);
  font: inherit;
  color: var(--film-ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--knob-radius);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease),
              transform var(--dur-state) var(--ease),
              box-shadow var(--dur-state) var(--ease);
}
.face[data-face="docs-new"] .kind__pick:hover:not(:disabled) {
  background: var(--film-raise);
  transform: translateY(var(--react-rise-y));
  box-shadow: var(--react-lift);
}
.face[data-face="docs-new"] .kind__pick:active:not(:disabled) {
  transform: translateY(0) scale(var(--react-press));
  box-shadow: none;
}
.face[data-face="docs-new"] .kind__pick:focus-visible {
  outline: 2px solid var(--film-ink);
  outline-offset: 2px;
}
.face[data-face="docs-new"] .kind__pick:disabled { cursor: not-allowed; opacity: 0.55; }

.face[data-face="docs-new"] .kind__index {
  align-self: start;
  font-size: var(--t-xs);
  color: var(--film-ink-3);
  font-variant-numeric: tabular-nums;
}

/* The miniatures: paper in the document's colours, ink lines, and the hard
   edge of the sheet beneath -- the room's reaction, drawn small. */
.face[data-face="docs-new"] .kind__paper {
  height: 100%;
  max-width: 100%;
  justify-self: start;
  overflow: visible;
  fill: var(--paper);
  stroke: var(--paper-ink);
  stroke-width: 1;
  stroke-linecap: round;
  filter: drop-shadow(2px 2px 0 var(--paper-under)) drop-shadow(0 0 0 transparent);
  transition: transform var(--dur-face) var(--ease);
  transform-origin: 50% 100%;
}
.face[data-face="docs-new"] .kind__paper path { fill: none; stroke: var(--paper-ink-3); }
.face[data-face="docs-new"] .kind__paper .kind__under { fill: var(--paper-under); stroke: var(--paper-mark); }
.face[data-face="docs-new"] .kind__paper--slides rect + path + rect,
.face[data-face="docs-new"] .kind__paper--slides rect:last-child { fill: var(--signal); stroke: none; opacity: 0.85; }
.face[data-face="docs-new"] .kind__paper--writer { height: 80px; }
.face[data-face="docs-new"] .kind__paper--sheets { height: 58px; }
.face[data-face="docs-new"] .kind__paper--slides { height: 52px; }
.face[data-face="docs-new"] .kind__paper--pdf { height: 82px; }
.face[data-face="docs-new"] .kind__paper--notes { height: 66px; }
.face[data-face="docs-new"] .kind__paper .kind__link { stroke: var(--signal); stroke-width: 2; }
/* Under the pointer the sheet tips back on its foot, the start of a fold. */
.face[data-face="docs-new"] .kind__pick:hover:not(:disabled) .kind__paper {
  transform: perspective(300px) rotateX(10deg);
}

.face[data-face="docs-new"] .kind__name {
  font-weight: 600;
  font-size: var(--t-md);
  margin-top: var(--s2);
}
.face[data-face="docs-new"] .kind__line {
  align-self: start;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--film-ink-2);
}
.face[data-face="docs-new"] .kind__soon { color: var(--film-ink-3); font-style: italic; }

/* On a phone the kinds become a structural list: a row each, the paper on
   the left at its own shape, the words beside it. */
@media (max-width: 900px) and (min-width: 721px) {
  .face[data-face="docs-new"] .kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .face[data-face="docs-new"] .kinds { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .face[data-face="docs-new"] .kind { border-bottom: var(--hairline) solid var(--film-rule); }
  .face[data-face="docs-new"] .kind__pick {
    grid-template-columns: 2.2em 76px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--s3);
    row-gap: var(--s1);
    padding: var(--s4) var(--s1);
  }
  .face[data-face="docs-new"] .kind__index { grid-row: 1 / 3; align-self: center; }
  .face[data-face="docs-new"] .kind__paper { grid-row: 1 / 3; height: 52px; justify-self: center; }
  .face[data-face="docs-new"] .kind__paper--writer, .face[data-face="docs-new"] .kind__paper--pdf { height: 60px; }
  .face[data-face="docs-new"] .kind__paper--sheets { height: 44px; }
  .face[data-face="docs-new"] .kind__paper--slides { height: 40px; }
  .face[data-face="docs-new"] .kind__paper--notes { height: 52px; }
  .face[data-face="docs-new"] .kind__name { margin: 0; align-self: end; }
}

/* ==========================================================================
   The working faces, shared by every kind: a desk and a column of tools.
   ========================================================================== */

[data-face^="docs-"] .bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: var(--s5);
  align-items: start;
}

[data-face^="docs-"] .bench__tools {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--film-rule) transparent;
  padding-right: var(--s1);
}

/* One heading per group of controls, a hairline above it: structure from
   rules and space, never boxes. Each heading carries a count or a state so a
   glance says what is in use. */
[data-face^="docs-"] .tool {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) 0 var(--s4);
  border-top: var(--hairline) solid var(--film-rule);
}
[data-face^="docs-"] .tool:first-child { border-top: 0; padding-top: 0; }

[data-face^="docs-"] .tool__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--film-ink);
}
[data-face^="docs-"] .tool__count {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--film-ink-3);
  font-variant-numeric: tabular-nums;
}
[data-face^="docs-"] .tool__note {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--film-ink-3);
}

[data-face^="docs-"] .tray__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
[data-face^="docs-"] .tray__label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--film-ink-3);
}

/* A labelled field: label above, always visible; the placeholder is an
   example, never the label -- DESIGN.md §2.4. */
[data-face^="docs-"] .field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}
[data-face^="docs-"] .field--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--s2);
}
[data-face^="docs-"] .field--row .field__label { grid-column: 1 / -1; }
[data-face^="docs-"] .field__label {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--film-ink-2);
}
[data-face^="docs-"] .field__input {
  min-width: 0;
  min-height: 40px;
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--film-ink);
  background: var(--film-raise);
  border: var(--hairline) solid var(--film-rule);
  border-radius: var(--knob-radius);
  transition: border-color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
[data-face^="docs-"] textarea.field__input { min-height: 64px; resize: vertical; }
/* A drop-down sits as wide as the fields round it, as the select it replaced did. */
[data-face^="docs-"] uc-select.field__input { display: flex; width: 100%; }

/* No browser-default controls in the archive.

   A number field keeps its arrow keys and loses the operating system's
   spinner, which is a grey widget from elsewhere in a field of paper; and a
   checkbox is a small square of the room's paper with an ink tick. Sheets
   draws its own and is left to it. */
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="number"]::-webkit-inner-spin-button,
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="checkbox"]:not(.visually-hidden) {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--film-raise);
  border: var(--hairline) solid var(--film-ink-3);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="checkbox"]:not(.visually-hidden)::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border: solid var(--signal-ink);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-state) var(--ease);
}
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="checkbox"]:not(.visually-hidden):checked {
  background: var(--signal-fill);
  border-color: var(--signal-fill);
}
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="checkbox"]:not(.visually-hidden):checked::before { transform: rotate(-45deg) scale(1); }
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="checkbox"]:not(.visually-hidden):hover { border-color: var(--film-ink-2); }
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="checkbox"]:not(.visually-hidden):checked:hover { border-color: var(--signal-fill); }
:is(#face-docs-writer, #face-docs-pdf, #face-docs-notes, #face-docs-slides, .docs-dialog) input[type="checkbox"]:not(.visually-hidden):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
[data-face^="docs-"] .field__input::placeholder { color: var(--film-ink-3); }
[data-face^="docs-"] .field__input:hover { border-color: var(--film-ink-3); }
[data-face^="docs-"] .field__input:focus { outline: none; border-color: var(--signal); background: var(--film-raise-hi); }
[data-face^="docs-"] .field__input:focus-visible { box-shadow: 0 0 0 1px var(--signal); }

[data-face^="docs-"] .docs-go { margin-top: var(--s1); }

/* The bar that says something is being written. */
[data-face^="docs-"] .docs-progress { margin-top: var(--s2); }
[data-face^="docs-"] .docs-progress__what {
  margin: 0 0 var(--s2);
  font-size: var(--t-xs);
  color: var(--film-ink-3);
}
[data-face^="docs-"] .docs-progress__track {
  height: 3px;
  background: var(--film-raise-hi);
  overflow: hidden;
}
[data-face^="docs-"] .docs-progress__fill {
  height: 100%;
  width: 0;
  background: var(--signal);
  transition: width var(--dur-state) linear;
}
[data-face^="docs-"] .docs-progress__fill[data-unknown] {
  width: 30%;
  animation: docs-sweep 1.4s var(--ease) infinite;
}
@keyframes docs-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

/* While a file is being written the controls that would change it are
   fixed, and say so by their weight. */
[data-face^="docs-"][data-busy] .bench__tools .pill:not([data-keep]) { pointer-events: none; }

/* ==========================================================================
   The PDF desk.
   ========================================================================== */

#face-docs-pdf .desk {
  position: relative;
  min-width: 0;
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
  padding: var(--s2) var(--s3) var(--s4) var(--s1);
  scrollbar-width: thin;
  scrollbar-color: var(--film-rule) transparent;
}
#face-docs-pdf .desk__key {
  margin: 0 0 var(--s3);
  font-size: var(--t-xs);
  color: var(--film-ink-3);
  overflow-wrap: anywhere;
}
#face-docs-pdf .desk__empty {
  margin: var(--s6) 0;
  max-width: 40ch;
  font-size: var(--t-sm);
  color: var(--film-ink-2);
}

#face-docs-pdf .sheets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--s5) var(--s4);
  align-items: end;
}

#face-docs-pdf .sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  outline: none;
  cursor: grab;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transform: translate(var(--dx, 0), var(--dy, 0));
}

/* The page as a sheet: white paper, the hard edge of the sheet below it,
   and nothing soft anywhere. */
#face-docs-pdf .sheet__paper {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio, 210 / 297);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper-rule), 2px 2px 0 0 var(--paper-under), 2px 2px 0 1px var(--paper-rule);
  transition: box-shadow var(--dur-state) var(--ease), transform var(--dur-face) var(--ease);
}
#face-docs-pdf .sheet__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Chosen: a corner folded down, as you would mark a page in a book -- and a
   line in the room's ink around it. The fold is what says it, not the
   colour; the colour only agrees. */
#face-docs-pdf .sheet__paper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: linear-gradient(225deg, var(--film-shell-solid) 0 50%, var(--paper-under) 50% 100%);
  box-shadow: -1px 1px 0 var(--paper-rule);
  transition: width var(--dur-state) var(--ease), height var(--dur-state) var(--ease);
}
#face-docs-pdf .sheet[aria-selected="true"] .sheet__paper {
  box-shadow: 0 0 0 2px var(--signal), 3px 3px 0 1px var(--paper-under), 3px 3px 0 2px var(--paper-rule);
}
#face-docs-pdf .sheet[aria-selected="true"] .sheet__paper::after { width: 18px; height: 18px; }

#face-docs-pdf .sheet:hover .sheet__paper { transform: translateY(-1px); }
#face-docs-pdf .sheet:focus-visible .sheet__paper { outline: 2px solid var(--film-ink); outline-offset: 5px; }

#face-docs-pdf .sheet__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-xs);
  color: var(--film-ink-2);
  font-variant-numeric: tabular-nums;
}
#face-docs-pdf .sheet[aria-selected="true"] .sheet__no { color: var(--film-ink); font-weight: 600; }
#face-docs-pdf .sheet__from { color: var(--film-ink-3); }
#face-docs-pdf .sheet[data-marked="yes"] .sheet__no::after { content: " \00B7  marked"; color: var(--film-ink-3); font-weight: 400; }
#face-docs-pdf .sheet[data-read="yes"] .sheet__no::after { content: " \00B7  read"; color: var(--film-ink-3); font-weight: 400; }
#face-docs-pdf .sheet[data-read="yes"][data-marked="yes"] .sheet__no::after { content: " \00B7  marked, read"; }

/* Picked up: the sheet comes off the desk with its corner raised and a hard
   shadow under it, and goes wherever the pointer goes. */
#face-docs-pdf .sheet[data-lifted] {
  z-index: 3;
  cursor: grabbing;
  transition: none;
}
#face-docs-pdf .sheet[data-lifted] .sheet__paper {
  transform: rotate(-2deg);
  box-shadow: 0 0 0 2px var(--signal), 6px 6px 0 0 var(--paper-shadow);
}
#face-docs-pdf .sheets[data-dragging] .sheet:not([data-lifted]) { cursor: grabbing; }

/* Where it will land: a rule that draws itself down the gap. */
#face-docs-pdf .sheets__drop {
  position: absolute;
  width: 2px;
  background: var(--signal);
  pointer-events: none;
  transform-origin: 50% 0;
  animation: docs-rule var(--dur-state) var(--ease) both;
}
@keyframes docs-rule { from { transform: scaleY(0); } to { transform: none; } }

/* Turned: the sheet turns on the desk, then is redrawn turned. */
#face-docs-pdf .sheet[data-turning="right"] .sheet__canvas { animation: docs-turn-right var(--dur-face) var(--ease) both; }
#face-docs-pdf .sheet[data-turning="left"] .sheet__canvas { animation: docs-turn-left var(--dur-face) var(--ease) both; }
@keyframes docs-turn-right { from { transform: rotate(-90deg); } to { transform: none; } }
@keyframes docs-turn-left { from { transform: rotate(90deg); } to { transform: none; } }

/* Taken out: folded away on its top edge. Added: laid down the same way. */
#face-docs-pdf .sheet[data-closing] .sheet__paper {
  transform-origin: 50% 0;
  animation: docs-fold-away var(--dur-face) var(--ease) both;
}
@keyframes docs-fold-away { to { transform: perspective(500px) rotateX(-80deg); opacity: 0; } }
#face-docs-pdf .sheet[data-arriving] .sheet__paper {
  transform-origin: 50% 0;
  animation: docs-fold-in var(--dur-face) var(--ease) both;
}
@keyframes docs-fold-in {
  from { transform: perspective(500px) rotateX(-70deg); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

/* --- one page, large --------------------------------------------------------- */

#face-docs-pdf .desk--one { padding-top: 0; }
#face-docs-pdf .leaf__bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0 var(--s3);
}
#face-docs-pdf .leaf__where {
  min-width: 9em;
  text-align: center;
  font-size: var(--t-xs);
  color: var(--film-ink-2);
  font-variant-numeric: tabular-nums;
}
#face-docs-pdf .leaf {
  position: relative;
  max-width: 100%;
  margin: 0 auto var(--s4);
  aspect-ratio: var(--ratio, 210 / 297);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper-rule), 3px 3px 0 0 var(--paper-under), 3px 3px 0 1px var(--paper-rule);
}
#face-docs-pdf .leaf__canvas { display: block; width: 100%; height: 100%; }
#face-docs-pdf .leaf__over { position: absolute; inset: 0; }

/* The words read off a scan, over it: there to be selected, invisible until
   they are -- the same as in the saved PDF. Each line is stretched to the
   width it has in the picture. */
#face-docs-pdf .readlayer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  font-family: "Docs Sans", sans-serif;
  line-height: 1;
  white-space: pre;
  color: transparent;
}
#face-docs-pdf .readlayer__line {
  position: absolute;
  white-space: pre;
  color: transparent;
  cursor: text;
  transform: scaleX(var(--stretch, 1));
  transform-origin: 0 0;
}
#face-docs-pdf .readlayer ::selection { background: var(--paper-signal-wash); color: transparent; }
#face-docs-pdf .readlayer__line::selection { background: var(--paper-signal-line); color: transparent; }

/* A box put on the page. Its frame is always drawn, faintly, so a finger
   that cannot hover still sees that it is a thing that can be moved. */
#face-docs-pdf .placed {
  position: absolute;
  min-width: 24px;
  outline: 1px dashed var(--paper-signal-line);
  outline-offset: 2px;
  touch-action: none;
}
#face-docs-pdf .placed[data-kind="sign"] { cursor: move; }
#face-docs-pdf .placed[data-picked],
#face-docs-pdf .placed:focus-within { outline: 1px solid var(--signal); }
#face-docs-pdf .placed:focus-visible { outline: 2px solid var(--signal); }
#face-docs-pdf .placed__words {
  display: block;
  min-width: 1ch;
  padding: 0 1px;
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  line-height: 1.2;
  color: var(--paper-ink);
  white-space: pre;
  outline: none;
  cursor: text;
}
#face-docs-pdf .placed__img { display: block; width: 100%; height: auto; pointer-events: none; }
/* The grip, on the box's corner, for moving it. Shown when the box is chosen
   -- and always, on a screen with no pointer to hover with. */
#face-docs-pdf .placed__grip {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 14px;
  height: 14px;
  background: var(--signal);
  box-shadow: 0 0 0 2px var(--paper);
  cursor: move;
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease);
}
#face-docs-pdf .placed[data-picked] .placed__grip,
#face-docs-pdf .placed:focus-within .placed__grip { opacity: 1; }
@media (hover: none) {
  #face-docs-pdf .placed__grip { opacity: 1; width: 22px; height: 22px; left: -18px; top: -18px; }
}

/* A signature on the page moves by itself (no grip), turns about its
   middle, and when chosen shows two handles: the corner square sizes it, the
   round one on its stem above turns it. Each is a fingertip wide, whatever
   its mark looks like. */
#face-docs-pdf .placed[data-kind="sign"] { transform-origin: 50% 50%; outline: none; }
/* Its frame is drawn, not an outline: Safari rounds an outline off on a
   turned box, and a drawn frame turns with it, square, in both. */
#face-docs-pdf .placed[data-kind="sign"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px dashed var(--paper-signal-line);
  pointer-events: none;
}
#face-docs-pdf .placed[data-kind="sign"][data-picked]::after,
#face-docs-pdf .placed[data-kind="sign"]:focus-within::after { border: 1px solid var(--signal); }
#face-docs-pdf .placed[data-kind="sign"]:focus-visible::after { inset: -4px; border-width: 2px; }
#face-docs-pdf .placed[data-kind="sign"] .placed__grip { display: none; }
#face-docs-pdf .placed__handle {
  position: absolute;
  width: 32px;
  height: 32px;
  display: none;
  touch-action: none;
}
#face-docs-pdf .placed[data-kind="sign"][data-picked] .placed__handle,
#face-docs-pdf .placed[data-kind="sign"]:focus-within .placed__handle { display: block; }
#face-docs-pdf .placed__handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: var(--signal);
  box-shadow: 0 0 0 2px var(--paper);
}
#face-docs-pdf .placed__handle--size { right: -18px; bottom: -18px; cursor: nwse-resize; }
#face-docs-pdf .placed__handle--turn { left: 50%; top: -46px; margin-left: -16px; cursor: grab; }
#face-docs-pdf .placed__handle--turn::after { border-radius: 50%; }
#face-docs-pdf .placed__handle--turn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  width: 1px;
  height: 22px;
  background: var(--signal);
}
@media (pointer: coarse) {
  #face-docs-pdf .placed__handle { width: 40px; height: 40px; }
  #face-docs-pdf .placed__handle::after { width: 16px; height: 16px; }
  #face-docs-pdf .placed__handle--size { right: -22px; bottom: -22px; }
  #face-docs-pdf .placed__handle--turn { top: -56px; margin-left: -20px; }
  #face-docs-pdf .placed__handle--turn::before { top: 28px; height: 26px; }
}

/* Where a form asks to be signed. */
#face-docs-pdf .signhere {
  position: absolute;
  min-height: 24px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  background: var(--paper-signal-wash);
  border: 1.5px dashed var(--signal);
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
}
#face-docs-pdf .signhere::before { content: ""; position: absolute; inset: -8px; }
#face-docs-pdf .signhere__label {
  padding: 3px 8px;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--paper);
  background: var(--signal);
  border-radius: 999px;
  white-space: nowrap;
}
#face-docs-pdf .signhere:hover .signhere__label,
#face-docs-pdf .signhere:focus-visible .signhere__label { background: var(--paper-ink); }
#face-docs-pdf .signhere:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Choosing where to sign: the page takes a tap or a dragged box. */
#face-docs-pdf .leaf[data-placing] { cursor: crosshair; }
#face-docs-pdf .leaf[data-placing] .onform,
#face-docs-pdf .leaf[data-placing] .tx-layer,
#face-docs-pdf .leaf[data-placing] .readlayer,
#face-docs-pdf .leaf[data-placing] .an-layer { pointer-events: none; }
#face-docs-pdf .placebox {
  position: absolute;
  border: 1.5px dashed var(--signal);
  background: var(--paper-signal-wash);
  pointer-events: none;
}
#face-docs-pdf .placehint {
  position: sticky;
  top: var(--s2);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--s3);
  padding: var(--s2) var(--s3);
  font-size: var(--t-sm);
  color: var(--film-ink);
  background: var(--film-shell-solid);
  border: var(--hairline) solid var(--film-rule);
  border-radius: var(--knob-radius);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
}
#face-docs-pdf .placehint[hidden] { display: none; }

/* The form's own fields, drawn where they are on the page. */
#face-docs-pdf .onform {
  position: absolute;
  margin: 0;
  padding: 0 2px;
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  color: var(--paper-ink);
  background: var(--paper-signal-wash);
  border: 0;
  border-bottom: 1px solid var(--paper-signal-line);
  border-radius: 0;
  resize: none;
}
#face-docs-pdf .onform:focus { outline: 2px solid var(--signal); background: var(--paper-signal-wash); }
#face-docs-pdf button.onform { cursor: pointer; border: 1px solid var(--paper-signal-line); }
#face-docs-pdf button.onform[aria-checked="true"]::after {
  content: "";
  position: absolute;
  inset: 22%;
  background: var(--paper-ink);
}
#face-docs-pdf button.onform[data-type="radiobutton"] { border-radius: 50%; }
#face-docs-pdf button.onform[data-type="radiobutton"][aria-checked="true"]::after { border-radius: 50%; }

#face-docs-pdf .formlist { display: flex; flex-direction: column; gap: var(--s3); }
#face-docs-pdf .formlist__from {
  margin: var(--s2) 0 0;
  font-size: var(--t-xs);
  color: var(--film-ink-3);
}

/* ==========================================================================
   Notes: a card of paper on the desk of the editing shell, the list and the
   search in the left panel, the outline, links and map in the right.
   ========================================================================== */

#face-docs-notes .notes__desk {
  min-height: 100%;
  padding: var(--s6) var(--s5) var(--s7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}
/* The card itself: paper, with the edge of the card beneath it. */
#face-docs-notes .notes__sheet {
  position: relative;
  width: min(100%, 780px);
  flex: 1 0 auto;
  min-height: 420px;
  padding: var(--s7);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper-rule), 3px 3px 0 0 var(--paper-under), 3px 3px 0 1px var(--paper-rule);
}
#face-docs-notes .notes__back { width: min(100%, 780px); }

/* The panels. */
#face-docs-notes .notes__side, #face-docs-notes .notes__search, #face-docs-notes .notes__outline,
#face-docs-notes .notes__links, #face-docs-notes .notes__graph, #face-docs-notes .notes__help {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
#face-docs-notes .notes__key {
  float: right;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--film-ink-3);
}
#face-docs-notes .notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--hairline) solid var(--film-rule);
}
#face-docs-notes .notes__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  font: inherit;
  text-align: left;
  color: var(--film-ink);
  background: none;
  border: 0;
  border-bottom: var(--hairline) solid var(--film-rule);
  cursor: pointer;
  position: relative;
  transition: background-color var(--dur-state) var(--ease);
}
#face-docs-notes .notes__item:hover { background: var(--film-raise); }
#face-docs-notes .notes__item:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
/* The open note: a rule down its edge, the same mark the room uses for the
   line being worked on, and its title at full weight. */
#face-docs-notes .notes__item[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--s2);
  bottom: var(--s2);
  width: 2px;
  background: var(--signal);
}
#face-docs-notes .notes__item[aria-current="true"] .notes__item-title { font-weight: 600; }
#face-docs-notes .notes__item-title {
  font-size: var(--t-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#face-docs-notes .notes__item-when { font-size: var(--t-xs); color: var(--film-ink-3); }
/* Today's note, one press away above the list. */
#face-docs-notes .notes__quick { margin: calc(var(--s1) * -1) 0 0; }
#face-docs-notes .notes__quick-key { margin-left: var(--s2); font-weight: 400; color: var(--film-ink-3); }
/* Folders: a row that folds its notes away, the notes under it set in. */
#face-docs-notes .notes__folderrow { list-style: none; }
#face-docs-notes .notes__folder {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 40px;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: left;
  color: var(--film-ink-2);
  background: none;
  border: 0;
  border-bottom: var(--hairline) solid var(--film-rule);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease);
}
#face-docs-notes .notes__folder:hover { background: var(--film-raise); color: var(--film-ink); }
#face-docs-notes .notes__folder:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
#face-docs-notes .notes__folder-mark {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-state) var(--ease);
}
#face-docs-notes .notes__folder[aria-expanded="true"] .notes__folder-mark { transform: rotate(45deg) translate(-1px, -1px); }
#face-docs-notes .notes__folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#face-docs-notes .notes__folder-count { font-size: var(--t-xs); font-weight: 400; color: var(--film-ink-3); }
#face-docs-notes .notes__sub { list-style: none; margin: 0; padding: 0; }
#face-docs-notes .notes__sub .notes__item { padding-left: calc(var(--s3) + 15px); }

/* Search: each note found, and the lines in it that say it. */
#face-docs-notes .notes__hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#face-docs-notes .notes__hit { display: flex; flex-direction: column; padding: var(--s2) 0; border-bottom: var(--hairline) solid var(--film-rule); }
#face-docs-notes .notes__hit-title, #face-docs-notes .notes__hit-line {
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--film-ink);
  transition: background-color var(--dur-state) var(--ease);
}
#face-docs-notes .notes__hit-title { font-size: var(--t-sm); font-weight: 600; padding: var(--s1) var(--s2); }
#face-docs-notes .notes__hit-line { font-size: var(--t-xs); color: var(--film-ink-2); padding: 2px var(--s2) 2px var(--s4); line-height: 1.45; }
#face-docs-notes .notes__hit-title:hover, #face-docs-notes .notes__hit-line:hover { background: var(--film-raise); }
#face-docs-notes .notes__hit-title:focus-visible, #face-docs-notes .notes__hit-line:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
#face-docs-notes .notes__hits mark { background: var(--paper-signal-wash); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px var(--paper-signal-line); }

/* Outline: the headings, indented by level. */
#face-docs-notes .notes__heads { list-style: none; margin: 0; padding: 0; }
#face-docs-notes .notes__head {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: var(--s1) var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  color: var(--film-ink);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#face-docs-notes .notes__head:hover { background: var(--film-raise); }
#face-docs-notes .notes__head:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
#face-docs-notes .notes__head--1 { font-weight: 600; }
#face-docs-notes .notes__head--2 { padding-left: var(--s4); }
#face-docs-notes .notes__head--3 { padding-left: var(--s6); color: var(--film-ink-2); }
#face-docs-notes .notes__head--4 { padding-left: var(--s7); color: var(--film-ink-3); }

/* Links. */
#face-docs-notes .notes__linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
#face-docs-notes .notes__linklist li { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
#face-docs-notes .notes__linklist .notes__backitem { color: var(--film-ink); text-decoration-color: var(--film-rule); }
#face-docs-notes .notes__linklist .notes__backitem[data-missing] { color: var(--film-ink-3); }
#face-docs-notes .notes__linkit { min-height: 28px; padding: 0 var(--s3); font-size: var(--t-xs); }

/* The map. */
#face-docs-notes .notes__graph-host { position: relative; min-height: 220px; }
#face-docs-notes .notes__graph-canvas { display: block; touch-action: manipulation; }
#face-docs-notes .notes__graph-name { min-height: 1.4em; margin: 0; font-size: var(--t-xs); color: var(--film-ink-2); }
#face-docs-notes .notes__graph-none { color: var(--film-ink-3); font-size: var(--t-sm); }

/* What can be typed. */
#face-docs-notes .notes__md { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s3); margin: 0; font-size: var(--t-sm); }
#face-docs-notes .notes__md dt { color: var(--film-ink); font-size: var(--t-xs); white-space: nowrap; }
#face-docs-notes .notes__md dd { margin: 0; color: var(--film-ink-2); }

/* Writing: the document face, a reading measure, and every marker kept
   on the line in a faint ink so nothing typed is hidden. */
#face-docs-notes .md-write,
#face-docs-notes .md-read {
  max-width: 68ch;
  margin: 0 auto;
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--paper-ink);
  caret-color: var(--signal);
}
#face-docs-notes .md-write { min-height: 300px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
#face-docs-notes .md-write:focus-visible { outline: none; }
#face-docs-notes .md-write .ln { min-height: 1.6em; }
/* An empty card says what goes on it, in the faint ink the markers use. */
#face-docs-notes .md-write { position: relative; }
#face-docs-notes .md-write:has(> .ln:only-child > br:only-child)::before {
  content: "Write in Markdown: # for a heading, - for a list, [[ to link another note";
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--paper-mark);
  pointer-events: none;
}
#face-docs-notes .md-mark { color: var(--paper-mark); font-weight: 400; font-style: normal; }
#face-docs-notes .ln--heading { font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
#face-docs-notes .ln--h1 { font-size: 1.75em; margin: 0.5em 0 0.2em; }
#face-docs-notes .ln--h2 { font-size: 1.4em; margin: 0.5em 0 0.15em; }
#face-docs-notes .ln--h3 { font-size: 1.18em; margin: 0.35em 0 0.1em; }
#face-docs-notes .ln--quote { color: var(--paper-ink-2); border-left: 2px solid var(--paper-rule); padding-left: var(--s3); }
#face-docs-notes .ln--code,
#face-docs-notes .ln--fence { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-tint); padding: 0 var(--s2); }
#face-docs-notes .ln--table { font-family: var(--font-mono); font-size: 0.86em; white-space: pre; overflow-x: auto; contain: inline-size; }
#face-docs-notes .ln--done { color: var(--paper-ink-3); text-decoration: line-through; text-decoration-color: var(--paper-mark); }
#face-docs-notes .md-box { font-family: var(--font-mono); color: var(--signal); cursor: pointer; border-radius: 2px; }
#face-docs-notes .md-box:hover { background: var(--paper-signal-wash); }
#face-docs-notes .md-code { font-family: var(--font-mono); font-size: 0.88em; background: var(--paper-tint); padding: 0 2px; }
#face-docs-notes .md-wiki { color: var(--signal); text-decoration: underline; text-decoration-color: var(--paper-signal-line); text-underline-offset: 0.18em; }
#face-docs-notes .md-wiki[data-missing] { color: var(--signal); text-decoration-style: dashed; }
#face-docs-notes .md-link { color: var(--signal); text-decoration: underline; text-underline-offset: 0.18em; }
#face-docs-notes .md-tag { color: var(--paper-ink-2); background: var(--paper-tint); padding: 0 3px; border-radius: 2px; }
#face-docs-notes .md-remote { color: var(--paper-ink-3); font-style: italic; }

/* Reading: the same note, set as a page. */
#face-docs-notes .md-read h1, #face-docs-notes .md-read h2, #face-docs-notes .md-read h3,
#face-docs-notes .md-read h4, #face-docs-notes .md-read h5, #face-docs-notes .md-read h6 {
  margin: 1.1em 0 0.35em; line-height: 1.25; letter-spacing: -0.01em;
}
#face-docs-notes .md-read h1 { font-size: 1.75em; margin-top: 0.2em; }
#face-docs-notes .md-read h2 { font-size: 1.4em; }
#face-docs-notes .md-read h3 { font-size: 1.18em; }
#face-docs-notes .md-read p, #face-docs-notes .md-read ul, #face-docs-notes .md-read ol,
#face-docs-notes .md-read blockquote, #face-docs-notes .md-read pre { margin: 0 0 0.85em; }
#face-docs-notes .md-read ul, #face-docs-notes .md-read ol { padding-left: 1.4em; }
#face-docs-notes .md-read blockquote { padding-left: var(--s4); border-left: 2px solid var(--paper-rule); color: var(--paper-ink-2); }
#face-docs-notes .md-read hr { border: 0; border-top: 1px solid var(--paper-rule); margin: 1.4em 0; }
#face-docs-notes .md-pre { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-tint); padding: var(--s3) var(--s4); overflow-x: auto; }
/* A table scrolls sideways in its own frame and never widens the note
   (its width does not count towards the page's): the same for a table's
   lines while it is written. */
#face-docs-notes .md-table { overflow-x: auto; margin: 0 0 0.85em; contain: inline-size; overscroll-behavior-x: contain; }
#face-docs-notes .md-read table { border-collapse: collapse; font-size: 0.94em; }
#face-docs-notes .md-read th, #face-docs-notes .md-read td { padding: var(--s1) var(--s3); border-bottom: 1px solid var(--paper-rule); text-align: left; }
#face-docs-notes .md-read th { font-weight: 700; }
#face-docs-notes .md-read tbody tr:nth-child(even) { background: var(--paper-tint); }
#face-docs-notes .md-task { list-style: none; margin-left: -1.4em; display: flex; gap: var(--s2); align-items: baseline; }
#face-docs-notes .md-tick {
  flex: none;
  width: 0.95em; height: 0.95em;
  border: 1.5px solid var(--signal);
  border-radius: 2px;
  transform: translateY(0.12em);
  cursor: pointer;
  position: relative;
}
#face-docs-notes .md-tick[aria-checked="true"] { background: var(--signal); }
#face-docs-notes .md-tick[aria-checked="true"]::after {
  content: ""; position: absolute; left: 28%; top: 6%; width: 32%; height: 60%;
  border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#face-docs-notes .md-tick:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
#face-docs-notes .md-img { max-width: 100%; height: auto; }
#face-docs-notes .notes__blank, #face-docs-notes .notes__empty { color: var(--paper-ink-3); font-size: var(--t-sm); }
#face-docs-notes .notes__empty { margin: var(--s6) auto; max-width: 40ch; text-align: center; }

/* The [[ list, under the caret. */
#face-docs-notes .notes__suggest {
  position: absolute;
  z-index: 3;
  min-width: 220px;
  max-width: 320px;
  margin: 0;
  padding: var(--s1) 0;
  list-style: none;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper-rule), 3px 3px 0 0 var(--paper-under);
  font-size: var(--t-sm);
}
#face-docs-notes .notes__suggest li { padding: var(--s2) var(--s3); cursor: pointer; color: var(--paper-ink); }
#face-docs-notes .notes__suggest li[aria-selected="true"] { background: var(--paper-signal-wash); }

#face-docs-notes .notes__back { display: flex; flex-direction: column; gap: var(--s2); }
#face-docs-notes .notes__backlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
#face-docs-notes .notes__backitem {
  font: inherit; font-size: var(--t-sm);
  color: var(--signal);
  background: none; border: 0; padding: var(--s1) 0;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--paper-signal-line);
  cursor: pointer;
}
#face-docs-notes .notes__backitem:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }

/* ==marked== words, and another note shown inside this one. */
#face-docs-notes .md-hl { background: var(--mark-yellow); color: inherit; border-radius: 2px; padding: 0 1px; }
#face-docs-notes .md-embed {
  margin: 0 0 1em;
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--paper-signal-line);
  background: var(--paper-signal-wash);
  border-radius: 0 4px 4px 0;
}
#face-docs-notes .md-embed__head { display: inline-block; margin-bottom: var(--s2); font-size: var(--t-xs); font-weight: 600; text-transform: none; }
#face-docs-notes .md-embed__body > :last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  #face-docs-notes .notes__desk { padding: var(--s3) var(--s2) var(--s5); }
  #face-docs-notes .notes__sheet { padding: var(--s5) var(--s4); min-height: 60vh; }
}

/* ==========================================================================
   The writer: a sheet of A4 or Letter on the desk of the editing shell.
   ========================================================================== */

#face-docs-writer .wr-canvas { display: flex; justify-content: center; }
#face-docs-writer .wr-sheet {
  position: relative;
  flex: none;
  width: var(--wr-sheet-w, 793.7px);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper-rule), 3px 3px 0 0 var(--paper-under), 3px 3px 0 1px var(--paper-rule);
}

/* The document's own type, at the printed size: 12 pt is 16 px, and the
   document's styles (text size, line spacing, space between paragraphs) are
   three variables, the same on the page and in the copy measured for the
   PDF. Kerning and ligatures off in both, so the two set every line alike. */
#face-docs-writer .wr-doc {
  min-height: var(--wr-sheet-h, 1122px);
  padding: var(--wr-pad, 94.5px);
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  font-size: var(--wr-size, 16px);
  line-height: var(--wr-lh, 1.38);
  color: var(--paper-ink);
  font-kerning: none;
  font-variant-ligatures: none;
  text-rendering: optimizeSpeed;
  overflow-wrap: break-word;
  outline: none;
  caret-color: var(--signal);
}
#face-docs-writer .wr-measure {
  position: absolute;
  left: -40000px;
  top: 0;
  min-height: 0;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
}
#face-docs-writer .wr-doc > :first-child { margin-top: 0; }

/* A run of columns: the browser's own columns, a 36 pt gap as in Word, the
   same on the page and in the copy measured for the PDF, cut page by page
   into rows by `paceColumns`. On screen its edges show as a faint dashed
   rule with its name, as Word shows a section break; neither prints. */
#face-docs-writer .wr-cols { column-gap: 48px; margin: 0 0 var(--wr-ps, 0.67em); padding: 10px 0 6px; }
/* Where a run's page ends: spans the columns and fills the rest of the page
   (`paceColumns` in pdf.js), on screen and in the copy set for the PDF. */
#face-docs-writer .wr-cbr { column-span: all; display: block; margin: 0; padding: 0; border: 0; user-select: none; pointer-events: none; }
#face-docs-writer .wr-cols[data-cols="2"] { column-count: 2; }
#face-docs-writer .wr-cols[data-cols="3"] { column-count: 3; }
#face-docs-writer .wr-cols > :first-child { margin-top: 0; }
#face-docs-writer .wr-cols > * { break-inside: avoid-column; }
#face-docs-writer .wr-cols > p, #face-docs-writer .wr-cols > li { break-inside: auto; }
#face-docs-writer .wr-cols {
  position: relative;
  background-image: linear-gradient(to right, var(--paper-mark) 50%, transparent 0), linear-gradient(to right, var(--paper-mark) 50%, transparent 0);
  background-size: 6px 1px, 6px 1px;
  background-position: 0 0, 0 100%;
  background-repeat: repeat-x;
}
#face-docs-writer .wr-cols::before {
  content: attr(data-cols) " columns";
  position: absolute;
  top: -0.6em;
  right: 0;
  padding: 0 4px;
  font: 600 10px/1.2 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--paper-mark);
  background: var(--paper);
  pointer-events: none;
  user-select: none;
}

/* A new document says where its title and its first words go. */
#face-docs-writer .wr-doc > h1:first-child:has(> br:only-child),
#face-docs-writer .wr-doc > h1:first-child:has(> br:only-child) + p:has(> br:only-child) { position: relative; }
#face-docs-writer .wr-doc > h1:first-child:has(> br:only-child)::before,
#face-docs-writer .wr-doc > h1:first-child:has(> br:only-child) + p:has(> br:only-child)::before {
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--paper-mark);
  pointer-events: none;
}
#face-docs-writer .wr-doc > h1:first-child:has(> br:only-child)::before { content: "Title"; }
#face-docs-writer .wr-doc > h1:first-child:has(> br:only-child) + p:has(> br:only-child)::before { content: "Start writing, or paste from anywhere"; }
#face-docs-writer .wr-doc p { margin: 0 0 var(--wr-ps, 0.67em); }
#face-docs-writer .wr-doc h1,
#face-docs-writer .wr-doc h2,
#face-docs-writer .wr-doc h3 { font-weight: 700; line-height: 1.2; letter-spacing: 0; }
#face-docs-writer .wr-doc h1 { font-size: 1.667em; margin: 0.9em 0 0.3em; }
#face-docs-writer .wr-doc h2 { font-size: 1.333em; margin: 0.88em 0 0.31em; }
#face-docs-writer .wr-doc h3 { font-size: 1.125em; margin: 0.89em 0 0.3em; }
#face-docs-writer .wr-doc blockquote { margin: 0 0 var(--wr-ps, 0.67em) 2.36em; font-style: italic; color: var(--paper-ink-2); }
#face-docs-writer .wr-doc ul,
#face-docs-writer .wr-doc ol { display: flow-root; margin: 0 0 var(--wr-ps, 0.67em); padding-left: 3em; }
#face-docs-writer .wr-doc li { margin: 0 0 0.25em; }
#face-docs-writer .wr-doc li > ul,
#face-docs-writer .wr-doc li > ol { margin: 0.25em 0 0; }
#face-docs-writer .wr-doc ul ul { list-style-type: circle; }
#face-docs-writer .wr-doc ol ol { list-style-type: lower-alpha; }
#face-docs-writer .wr-doc a { color: var(--paper-link); text-decoration: underline; }
#face-docs-writer .wr-doc .wr-figure { text-align: center; }
#face-docs-writer .wr-doc img { display: inline-block; max-width: 100%; height: auto; vertical-align: bottom; }
#face-docs-writer .wr-doc table { width: 100%; border-collapse: collapse; margin: 0 0 var(--wr-ps, 0.67em); table-layout: fixed; }
#face-docs-writer .wr-doc td,
#face-docs-writer .wr-doc th { border: 1px solid var(--paper-cell); padding: 0.25em 0.45em; vertical-align: top; text-align: left; }
#face-docs-writer .wr-doc hr.pagebreak {
  height: 0;
  margin: 18px 0;
  border: 0;
  border-top: 1px dashed var(--paper-mark);
  overflow: visible;
  position: relative;
}
#face-docs-writer .wr-doc hr.pagebreak::after {
  content: "page break";
  position: absolute;
  right: 0;
  top: -9px;
  padding-left: var(--s2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-ink-3);
  background: var(--paper);
}

/* Pictures: the chosen one outlined with a handle on its corner; one the
   text runs round floats to its side of the column. */
#face-docs-writer .wr-doc img.is-picked { outline: 2px solid var(--signal); outline-offset: 2px; }
#face-docs-writer .wr-doc .wr-figure[data-wrap] { height: 0; margin: 0; overflow: visible; }
#face-docs-writer .wr-doc .wr-figure[data-wrap="left"] img { float: left; margin: 0.2em 1.1em 0.6em 0; }
#face-docs-writer .wr-doc .wr-figure[data-wrap="right"] img { float: right; margin: 0.2em 0 0.6em 1.1em; }
#face-docs-writer .wr-imghandle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--signal);
  border: 2px solid var(--paper);
  border-radius: 3px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 2;
}
/* A fingertip wide where there is no mouse, though it looks the same. */
@media (pointer: coarse) {
  #face-docs-writer .wr-imghandle::before { content: ""; position: absolute; inset: -14px; }
}

/* A checklist: a box in the margin of each item, ticked by a press. */
#face-docs-writer .wr-doc ul.wr-check { list-style: none; padding-left: 1.8em; }
#face-docs-writer .wr-doc ul.wr-check > li { position: relative; }
#face-docs-writer .wr-doc ul.wr-check > li::before {
  content: "";
  position: absolute;
  left: -1.6em;
  top: 0.22em;
  width: 0.95em;
  height: 0.95em;
  border: 1.5px solid var(--paper-ink-2);
  border-radius: 3px;
  cursor: pointer;
}
#face-docs-writer .wr-doc ul.wr-check > li[data-checked="true"]::before { background: var(--paper-ink) linear-gradient(transparent, transparent); }
#face-docs-writer .wr-doc ul.wr-check > li[data-checked="true"]::after {
  content: "";
  position: absolute;
  left: -1.33em;
  top: 0.33em;
  width: 0.3em;
  height: 0.55em;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
#face-docs-writer .wr-doc ul.wr-check > li[data-checked="true"] { color: var(--paper-ink-3); text-decoration: line-through; text-decoration-color: var(--paper-mark); }
#face-docs-writer .wr-doc th { background: var(--paper-head); font-weight: 700; }

/* The size of a new table, picked on a grid. */
.wr-grid { min-width: 0; padding: var(--s2); }
/* Formatting as you type: what takes the last change back, beside the caret
   for a moment (writer/editor.js). Quiet: small, the room's paper, and gone
   as soon as typing goes on. */
.wr-autohint {
  position: fixed;
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 28px;
  padding: 0 var(--s3);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--film-ink);
  background: var(--film-shell-solid);
  border: var(--hairline) solid var(--film-rule);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.14);
  cursor: pointer;
  animation: wr-autohint-in var(--dur-state) var(--ease) both;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.wr-autohint kbd { font-family: var(--font-mono); font-weight: 400; color: var(--film-ink-3); }
.wr-autohint:hover { background: var(--film-raise-hi); }
.wr-autohint:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.wr-autohint[data-gone] { opacity: 0; transform: translateY(-2px); pointer-events: none; }
@keyframes wr-autohint-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wr-autohint { animation-name: wr-autohint-fade; }
  .wr-autohint[data-gone] { transform: none; }
  @keyframes wr-autohint-fade { from { opacity: 0; } to { opacity: 1; } }
}
.wr-grid__cells { display: grid; gap: 3px; }
.wr-grid__cells > div { display: flex; gap: 3px; }
.wr-grid__cell { width: 20px; height: 20px; padding: 0; background: var(--film-raise); border: var(--hairline) solid var(--film-rule); border-radius: 3px; cursor: pointer; }
.wr-grid__cell[data-on="yes"] { background: color-mix(in srgb, var(--signal) 30%, transparent); border-color: var(--signal); }
.wr-grid__cell:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.wr-grid__size { margin: var(--s2) 0 0; text-align: center; font-size: var(--t-xs); color: var(--film-ink-2); }

/* Print preview: the PDF's pages over the work. */
#face-docs-writer .wr-preview {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--ed-desk);
}
#face-docs-writer .wr-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--film-shell-solid);
  border-bottom: var(--hairline) solid var(--film-rule);
}
#face-docs-writer .wr-preview__count { font-size: var(--t-xs); color: var(--film-ink-2); }
#face-docs-writer .wr-preview__pages { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s5); padding: var(--s5); }
#face-docs-writer .wr-preview__page { width: min(100%, 720px); height: auto; box-shadow: 0 0 0 1px var(--paper-rule), 3px 3px 0 0 var(--paper-under); }

/* Footnote marks, and the notes as they read under the page. */
#face-docs-writer .wr-fn {
  font-size: 0.68em;
  line-height: 0;
  padding: 0 1px;
  color: var(--paper-link);
  cursor: pointer;
  user-select: none;
}
#face-docs-writer .wr-notes {
  margin: 0 var(--wr-pad, 94.5px);
  padding: var(--s3) 0 var(--wr-pad, 94.5px);
  border-top: 1px solid var(--paper-rule);
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  font-size: calc(var(--wr-size, 16px) * 0.83);
  line-height: 1.35;
  color: var(--paper-ink-2);
}
#face-docs-writer .wr-notes[hidden] { display: none; }
#face-docs-writer .wr-notes__title { margin: 0 0 var(--s2); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-ink-3); }
#face-docs-writer .wr-note { margin: 0 0 4px; }
#face-docs-writer .wr-note__n { font-size: 0.8em; vertical-align: super; line-height: 0; color: var(--paper-link); }
#face-docs-writer .wr-notes-measure { font-size: calc(var(--wr-size, 16px) * 0.83); line-height: 1.35; }

/* The contents: made from the headings, not typed. */
#face-docs-writer .wr-toc {
  margin: 0 0 1.2em;
  padding: 0.6em 0;
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  user-select: none;
}
#face-docs-writer .wr-toc__title { margin: 0 0 0.4em; font-weight: 700; font-size: 1.125em; }
#face-docs-writer .wr-toc__entry { display: flex; align-items: baseline; gap: 0.4em; margin: 0 0 0.2em; }
#face-docs-writer .wr-toc__entry::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--paper-mark); transform: translateY(-0.3em); }
#face-docs-writer .wr-toc__text { order: 0; color: var(--paper-ink); text-decoration: none; }
#face-docs-writer .wr-toc__text:hover { color: var(--paper-link); text-decoration: underline; }
#face-docs-writer .wr-toc__page { order: 2; font-variant-numeric: tabular-nums; }
#face-docs-writer .wr-toc__entry--h2 { padding-left: 1.2em; }
#face-docs-writer .wr-toc__entry--h3 { padding-left: 2.4em; font-size: 0.94em; }
#face-docs-writer .wr-toc__empty { margin: 0; color: var(--paper-ink-3); font-style: italic; }

/* Citations and the list of references (writer/sources.js): written by the
   document, not typed -- a citation is one mark, the list rebuilds itself. */
#face-docs-writer .wr-cite { border-radius: 3px; cursor: pointer; transition: background-color var(--dur-state) var(--ease); }
#face-docs-writer .wr-cite:hover { background: var(--paper-signal-wash, rgb(60 90 120 / 0.12)); }
#face-docs-writer .wr-cite[data-missing] { color: var(--film-bad); }
#face-docs-writer .wr-bib { margin: 1.2em 0; user-select: none; }
#face-docs-writer .wr-bib__title { margin: 0 0 0.6em; font-weight: 700; font-size: 1.5em; line-height: 1.25; }
#face-docs-writer .wr-bib__entry { margin: 0 0 0.6em; padding-left: 2em; text-indent: -2em; }
#face-docs-writer .wr-bib__empty { margin: 0; color: var(--paper-ink-3); font-style: italic; }
#face-docs-writer .wr-srclist { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; }
#face-docs-writer .wr-srcrow { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2) 0; border-bottom: var(--hairline) solid var(--film-rule); }
#face-docs-writer .wr-srcrow__entry { padding: var(--s1); margin: 0 calc(var(--s1) * -1); font: inherit; font-size: var(--t-sm); line-height: 1.45; text-align: left; color: var(--film-ink); background: none; border: 0; border-radius: 6px; cursor: pointer; }
#face-docs-writer .wr-srcrow__entry:hover { background: var(--film-raise-hi); }
#face-docs-writer .wr-srcrow__foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); color: var(--film-ink-3); }
#face-docs-writer .wr-srcrow__del { padding: var(--s1) var(--s2); font: inherit; color: var(--film-ink-2); background: none; border: 0; border-radius: 6px; cursor: pointer; }
#face-docs-writer .wr-srcrow__del:hover { background: var(--film-raise-hi); color: var(--film-bad); }
#face-docs-writer .wr-srcrow__del[data-armed="yes"] { color: var(--film-bad); }
.wr-citedlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.wr-citedlg .wr-cite__have { display: flex; flex-direction: column; max-height: 180px; overflow-y: auto; border: var(--hairline) solid var(--film-rule); border-radius: var(--knob-radius); }
.wr-citedlg .wr-cite__pick { padding: var(--s2) var(--s3); font: inherit; font-size: var(--t-sm); line-height: 1.4; text-align: left; color: var(--film-ink); background: none; border: 0; border-bottom: var(--hairline) solid var(--film-rule); cursor: pointer; }
.wr-citedlg .wr-cite__pick:last-child { border-bottom: 0; }
.wr-citedlg .wr-cite__pick:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; border-radius: 0; }
.wr-citedlg .wr-cite__row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s3); }
.wr-citedlg .wr-cite__pick:hover { background: var(--film-raise); }
.wr-citedlg .wr-cite__pick[aria-selected="true"] { background: var(--film-raise-hi); box-shadow: inset 3px 0 0 var(--signal); }
.wr-citedlg .wr-cite__new { display: flex; flex-direction: column; gap: var(--s3); transition: opacity var(--dur-state) var(--ease); }
.wr-citedlg .wr-cite__new[data-quiet] { opacity: 0.45; }
.wr-citedlg .wr-cite__more { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); }
.wr-citedlg textarea.field__input { min-height: 56px; resize: vertical; font-family: inherit; }

/* Comments: the words a comment is on, washed; the one under the caret
   stronger. Resolved ones are no longer washed. */
#face-docs-writer .wr-cm { background: var(--mark-yellow-wash, rgb(255 214 56 / 0.32)); border-bottom: 2px solid rgb(214 168 20 / 0.7); }
#face-docs-writer .wr-cm.is-active { background: rgb(255 214 56 / 0.6); }
#face-docs-writer .wr-cm[data-resolved="yes"] { background: none; border-bottom-color: transparent; }

/* Tracked changes: added in the room's ink, underlined; deleted struck
   through in red. "Show them" off shows the text as it would read. */
#face-docs-writer .wr-doc ins.wr-ins { color: var(--paper-link); text-decoration: underline; text-decoration-color: var(--paper-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
#face-docs-writer .wr-doc del.wr-del { color: rgb(170 44 36); text-decoration: line-through; text-decoration-color: rgb(170 44 36); }
#face-docs-writer[data-changes="hidden"] .wr-doc del.wr-del { display: none; }
#face-docs-writer[data-changes="hidden"] .wr-doc ins.wr-ins { color: inherit; text-decoration: none; }

/* Found words, painted without touching the page. */
::highlight(wr-find) { background-color: rgb(255 214 56 / 0.5); }
::highlight(wr-find-now) { background-color: rgb(255 150 30 / 0.75); color: black; }

/* Where the pages divide: a dashed rule across the sheet, its number in the
   margin, the header and footer either side of it, faint. */
#face-docs-writer .wr-guides { position: absolute; inset: 0; pointer-events: none; }
#face-docs-writer .wr-guide {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--paper-signal-line);
}
#face-docs-writer .wr-guide__label {
  position: absolute;
  right: var(--s2);
  top: 2px;
  font-size: 10px;
  color: var(--signal);
}
#face-docs-writer .wr-hf {
  position: absolute;
  left: var(--wr-pad, 94.5px);
  right: var(--wr-pad, 94.5px);
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 12px;
  color: var(--paper-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- the writer's panels ------------------------------------------------------- */

#face-docs-writer .wr-outline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#face-docs-writer .wr-outline button {
  width: 100%;
  padding: 5px var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  color: var(--film-ink);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#face-docs-writer .wr-outline button:hover { background: var(--film-raise-hi); }
#face-docs-writer .wr-outline button:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
#face-docs-writer .wr-outline__item--h1 button { font-weight: 600; }
#face-docs-writer .wr-outline__item--h2 button { padding-left: var(--s4); }
#face-docs-writer .wr-outline__item--h3 button { padding-left: var(--s6); color: var(--film-ink-2); }
#face-docs-writer .wr-find__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
#face-docs-writer .wr-find__count { font-size: var(--t-xs); color: var(--film-ink-3); }

#face-docs-writer .wr-cards { display: flex; flex-direction: column; gap: var(--s2); }
#face-docs-writer .wr-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  background: var(--film-raise);
  border-left: 3px solid var(--film-rule);
  border-radius: 0 8px 8px 0;
}
#face-docs-writer .wr-card.is-active { border-left-color: var(--signal); }
#face-docs-writer .wr-card[data-resolved="yes"] { opacity: 0.72; }
#face-docs-writer .wr-card[data-kind="ins"] { border-left-color: var(--paper-link); }
#face-docs-writer .wr-card[data-kind="del"] { border-left-color: rgb(170 44 36); }
#face-docs-writer .wr-card__quote {
  padding: 0;
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  color: var(--film-ink);
  background: none;
  border: 0;
  cursor: pointer;
}
#face-docs-writer .wr-card__quote:hover:not(:disabled) { text-decoration: underline; }
#face-docs-writer .wr-card__quote:disabled { color: var(--film-ink-3); cursor: default; }
#face-docs-writer .wr-card__change--ins { color: var(--paper-link); text-decoration: underline; }
#face-docs-writer .wr-card__change--del { color: rgb(170 44 36); text-decoration: line-through; }
#face-docs-writer .wr-card__meta { margin: 0; font-size: var(--t-xs); color: var(--film-ink-3); }
#face-docs-writer .wr-card__text { min-height: 52px; font-size: var(--t-sm); }
#face-docs-writer .wr-card__acts { display: flex; gap: var(--s1); flex-wrap: wrap; }
#face-docs-writer .wr-notelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
#face-docs-writer .wr-noteitem { display: flex; flex-direction: column; gap: var(--s1); }

@media (max-width: 860px) {
  #face-docs-writer .wr-sheet { width: 100%; }
  #face-docs-writer .wr-doc { padding: var(--s5) var(--s4); min-height: 60vh; }
  #face-docs-writer .wr-notes { margin: 0 var(--s4); padding-bottom: var(--s5); }
  #face-docs-writer .wr-guides { display: none; }
  /* A table on a narrow page keeps its words whole: its columns take what
     their words need, and a table wider than the page scrolls sideways in
     its own frame (the fades are shell/table-frames.js) -- the page never
     does. Only the page on screen (#wr-doc): the copy measured for the PDF
     is set at the printed width, as before. */
  #face-docs-writer #wr-doc table { display: block; overflow-x: auto; contain: inline-size; overscroll-behavior-x: contain; }
  #face-docs-writer #wr-doc table > tbody { display: table; width: 100%; table-layout: auto; border-collapse: collapse; }
  #face-docs-writer #wr-doc td,
  #face-docs-writer #wr-doc th { overflow-wrap: normal; }
}

/* The fade at the edge of a table that scrolls sideways, where more of it
   lies out of sight (shell/table-frames.js): drawn over the frame, beside
   the document, in the paper's own colour. */
.tfade {
  position: absolute;
  z-index: 2;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.tfade--left { background: linear-gradient(to right, var(--paper), transparent); }
.tfade--right { background: linear-gradient(to left, var(--paper), transparent); }
.tfade[data-on="yes"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tfade { transition: none; } }

/* ==========================================================================
   Sheets: a ruled sheet of paper, the formula line above it, tabs below.
   ========================================================================== */

#face-docs-sheets .sh-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding-bottom: var(--s3);
}
#face-docs-sheets .sh-formula {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: var(--hairline) solid var(--film-rule);
  border-bottom: 0;
  background: var(--paper);
}
#face-docs-sheets .sh-where {
  flex: none;
  min-width: 88px;
  padding: var(--s2) var(--s3);
  font-size: var(--t-xs);
  color: var(--paper-ink);
  border-right: var(--hairline) solid var(--paper-rule);
  display: flex;
  align-items: center;
}
#face-docs-sheets .sh-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: var(--s2) var(--s3);
  font-size: var(--t-sm);
  color: var(--paper-ink);
  background: none;
  border: 0;
}
#face-docs-sheets .sh-input:focus { outline: 2px solid var(--signal); outline-offset: -2px; }
#face-docs-sheets .sh-input::placeholder { color: var(--paper-ink-3); }

#face-docs-sheets .sh-grid {
  position: relative;
  height: calc(100dvh - 400px);
  min-height: 300px;
  overflow: auto;
  background: var(--paper);
  border: var(--hairline) solid var(--film-rule);
  box-shadow: 3px 3px 0 0 var(--paper-under), 3px 3px 0 1px var(--paper-rule);
  outline: none;
  overscroll-behavior: contain;
}
#face-docs-sheets .sh-grid:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }

#face-docs-sheets .sh-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 14px;
  color: var(--paper-ink);
}
#face-docs-sheets .sh-table th,
#face-docs-sheets .sh-table td {
  height: 28px;
  padding: 0 var(--s2);
  border-right: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 27px;
}
#face-docs-sheets .sh-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-head);
  font-size: 11px;
  font-weight: 400;
  color: var(--paper-ink-2);
  text-align: center;
  user-select: none;
}
#face-docs-sheets .sh-corner { left: 0; z-index: 3 !important; }
#face-docs-sheets .sh-rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper-head);
  font-size: 11px;
  font-weight: 400;
  color: var(--paper-ink-2);
  text-align: right;
  user-select: none;
}
#face-docs-sheets .sh-table th[data-on] { background: var(--paper-head-on); color: var(--paper-ink); }
#face-docs-sheets .sh-colhead { position: relative; }
#face-docs-sheets .sh-resize {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
}
#face-docs-sheets .sh-spacer td,
#face-docs-sheets .sh-spacer th { padding: 0; border: 0; height: auto; }
#face-docs-sheets .sh-table td { cursor: cell; }
#face-docs-sheets .sh-num { text-align: right; font-variant-numeric: tabular-nums; }
#face-docs-sheets .sh-err { color: var(--film-bad); text-align: center; }
#face-docs-sheets .sh-b { font-weight: 700; }
#face-docs-sheets .sh-i { font-style: italic; }
#face-docs-sheets .sh-al-left { text-align: left; }
#face-docs-sheets .sh-al-center { text-align: center; }
#face-docs-sheets .sh-al-right { text-align: right; }
/* Chosen cells: a wash of the room's ink. The cell the keyboard is on: a
   hard ink frame, which is what says it, the wash only agreeing. */
#face-docs-sheets td[data-sel] { background: var(--paper-signal-wash); }
#face-docs-sheets td[data-active] { box-shadow: inset 0 0 0 2px var(--signal); background: var(--paper); }

#face-docs-sheets .sh-edit {
  position: absolute;
  z-index: 4;
  padding: 0 var(--s2);
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 14px;
  color: var(--paper-ink);
  background: var(--paper);
  border: 0;
  box-shadow: 0 0 0 2px var(--signal), 3px 3px 0 2px var(--paper-rule);
  outline: none;
}

#face-docs-sheets .sh-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s3) 0;
}
#face-docs-sheets .sh-tablist { display: flex; flex-wrap: wrap; gap: 0; margin-right: var(--s2); }
/* Tabs are the tops of index cards: square, joined, the chosen one in front. */
#face-docs-sheets .sh-tab,
#face-docs-sheets .sh-tabfield {
  min-height: 36px;
  padding: 0 var(--s4);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--film-ink-2);
  background: var(--film-raise);
  border: var(--hairline) solid var(--film-rule);
  margin-right: -1px;
  cursor: pointer;
}
#face-docs-sheets .sh-tab[aria-selected="true"] {
  color: var(--paper-ink);
  background: var(--paper);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--signal);
}
#face-docs-sheets .sh-tab:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; position: relative; }
#face-docs-sheets .sh-tabfield { cursor: text; width: 12em; background: var(--paper); color: var(--paper-ink); }
#face-docs-sheets [data-armed] { color: var(--film-bad); border-color: var(--film-bad); }

#face-docs-sheets .sh-file {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3) var(--s5);
  padding-top: var(--s3);
  border-top: var(--hairline) solid var(--film-rule);
}
#face-docs-sheets .sh-file .tool__note { flex: 1 1 100%; max-width: 80ch; }

@media (max-width: 860px) {
  #face-docs-sheets .sh-grid { height: 60vh; }
}

#face-docs-sheets .wr-filename { flex: 0 1 280px; }

/* ==========================================================================
   Slides: the slide on the desk of the editing shell, the deck down the
   left, Format and Animate on the right, the notes under the slide.

   The slide itself is unscoped by face on purpose: the same `.sl-slide` is
   drawn on the desk, in the list, off screen to be measured for the PDF and
   full screen in a presentation -- which is outside every face.
   ========================================================================== */

.sl-slide {
  position: relative;
  display: block;
  width: var(--sl-w, 1280px);
  height: var(--sl-h, 720px);
  overflow: hidden;
  transform-origin: 0 0;
  background: #F3EEE4;
  color: var(--sl-ink, #1D1B18);
  font-family: "Liberation Sans", Arial, sans-serif;
  font-kerning: normal;
  text-rendering: geometricPrecision;
  isolation: isolate;
}
.sl-slide .sl-rule { position: absolute; left: 80px; bottom: 36px; width: 120px; height: 4px; background: var(--sl-accent, #3C5A78); }
.sl-slide .sl-box { position: absolute; transform-origin: 50% 50%; }
.sl-slide .sl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sl-slide .sl-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  box-sizing: border-box;
}
.sl-slide .sl-text--title { font-weight: 700; letter-spacing: -0.01em; }
.sl-slide .sl-flow { outline: none; min-height: 1.2em; }
.sl-slide .sl-p { position: relative; margin: 0 0 0.25em; }
.sl-slide .sl-p:last-child { margin-bottom: 0; }
/* An empty box's prompt: only while the box is empty, never printed. */
.sl-slide .sl-p[data-prompt]:has(> br:only-child)::after {
  content: attr(data-prompt);
  position: absolute;
  top: 0;
  left: var(--sl-pad, 0);
  right: 0;
  opacity: 0.42;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-slide .sl-p[data-prompt][style*="text-align:center"]:has(> br:only-child)::after { text-align: center; }
/* Gone as soon as the box is being written in, as PowerPoint's is. */
.sl-slide .sl-box[data-editing] .sl-p[data-prompt]::after { content: none; }
.sl-slide .sl-p[data-bullet]::before {
  content: attr(data-bullet);
  position: absolute;
  left: calc(var(--lvl, 0) * 1.1 * var(--sl-em, 1em));
  margin-left: 0;
  font-size: var(--sl-bs, 1em);
  line-height: inherit;
}
.sl-slide .sl-p a { color: inherit; }
.sl-slide .sl-box--image { overflow: hidden; }
.sl-slide .sl-box--image img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.sl-slide .sl-box--video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sl-slide .sl-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.sl-slide .sl-table td { padding: 4px 8px; line-height: 1.2; overflow: hidden; overflow-wrap: break-word; white-space: pre-wrap; }
.sl-slide .sl-table .sl-p { margin: 0; }

/* The desk: the slide, lifted off it, and the notes underneath. */
#face-docs-slides .sl-desk {
  min-height: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  outline: none;
}
#face-docs-slides .sl-stagewrap {
  position: relative;
  flex: none;
  box-shadow: 0 0 0 1px var(--paper-rule), 0 10px 30px rgb(0 0 0 / 0.12);
  touch-action: none;
  user-select: none;
}
#face-docs-slides .sl-stage { cursor: default; }
#face-docs-slides .sl-stage .sl-box { cursor: move; }
#face-docs-slides .sl-stage .sl-box[data-editing] { cursor: text; user-select: text; }
#face-docs-slides .sl-stage .sl-box[data-editing] .sl-flow { cursor: text; caret-color: var(--signal); }
#face-docs-slides .sl-stage .sl-box:not([data-editing]) .sl-flow { pointer-events: none; }
#face-docs-slides .sl-stage .sl-box--text:empty::after { content: ""; }
/* An empty text box still shows where it is. */
#face-docs-slides .sl-stage .sl-box--text:has(.sl-flow > .sl-p:only-child > br:only-child) { outline: 1px dashed var(--paper-mark); outline-offset: -1px; }
#face-docs-slides .sl-over { position: absolute; inset: 0; pointer-events: none; }
#face-docs-slides .sl-over svg { position: absolute; inset: 0; overflow: visible; }
/* Under a chosen box whose words are shrunk or run past it (slides/editor.js):
   the size of the editor's own type whatever the zoom. */
#face-docs-slides .sl-fitnote {
  position: absolute;
  transform: scale(var(--inv, 1)) translateY(8px);
  transform-origin: 0 0;
  height: 24px;
  padding: 0 var(--s2);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--film-ink-2);
  background: var(--film-shell-solid);
  border: var(--hairline) solid var(--film-rule);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  cursor: pointer;
  pointer-events: auto;
}
#face-docs-slides .sl-fitnote[data-fit="over"] { color: var(--film-bad); border-color: currentColor; }
#face-docs-slides .sl-fitnote:hover { color: var(--film-ink); background: var(--film-raise-hi); }
#face-docs-slides .sl-fitnote:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
#face-docs-slides .sl-sel__frame { fill: none; stroke: var(--signal); stroke-width: calc(1.5px * var(--inv, 1)); }
#face-docs-slides .sl-sel__h { fill: var(--paper); stroke: var(--signal); stroke-width: calc(1.5px * var(--inv, 1)); pointer-events: auto; }
#face-docs-slides .sl-sel__h[data-h="nw"], #face-docs-slides .sl-sel__h[data-h="se"] { cursor: nwse-resize; }
#face-docs-slides .sl-sel__h[data-h="ne"], #face-docs-slides .sl-sel__h[data-h="sw"] { cursor: nesw-resize; }
#face-docs-slides .sl-sel__h[data-h="n"], #face-docs-slides .sl-sel__h[data-h="s"] { cursor: ns-resize; }
#face-docs-slides .sl-sel__h[data-h="e"], #face-docs-slides .sl-sel__h[data-h="w"] { cursor: ew-resize; }
#face-docs-slides .sl-sel__h[data-h="p1"], #face-docs-slides .sl-sel__h[data-h="p2"] { cursor: crosshair; }
#face-docs-slides .sl-sel__rot { cursor: grab; }
#face-docs-slides .sl-sel__stem { stroke: var(--signal); stroke-width: calc(1px * var(--inv, 1)); }
#face-docs-slides .sl-guide { stroke: var(--film-bad); stroke-width: calc(1px * var(--inv, 1)); stroke-dasharray: calc(4px * var(--inv, 1)) calc(3px * var(--inv, 1)); }
#face-docs-slides .sl-marquee { fill: var(--paper-signal-wash); stroke: var(--signal); stroke-width: calc(1px * var(--inv, 1)); }
#face-docs-slides .sl-notes { width: var(--sl-w, 1280px); max-width: 100%; }
#face-docs-slides[data-nonotes] .sl-notes { display: none; }
#face-docs-slides .sl-notes__text {
  display: block;
  width: 100%;
  min-height: 84px;
  padding: var(--s3);
  font: inherit;
  font-size: 18px;
  line-height: 1.45;
  color: var(--film-ink);
  background: var(--film-raise);
  border: var(--hairline) solid var(--film-rule);
  border-radius: 6px;
  /* No grip: the box grows with what is written in it (slides/editor.js). */
  resize: none;
  overflow: hidden;
}
#face-docs-slides .sl-notes__text:focus { outline: 2px solid var(--signal); outline-offset: -1px; }
.sl-measure-host { position: fixed; left: -20000px; top: 0; visibility: hidden; pointer-events: none; contain: layout paint; }

/* The deck down the left. */
#face-docs-slides .sl-side { display: flex; flex-direction: column; gap: var(--s3); }
#face-docs-slides .sl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); counter-reset: none; }
#face-docs-slides .sl-thumb { position: relative; }
#face-docs-slides .sl-thumb[data-drop="before"]::before, #face-docs-slides .sl-thumb[data-drop="after"]::after {
  content: ""; position: absolute; left: 28px; right: 0; height: 3px; background: var(--signal); border-radius: 2px;
}
#face-docs-slides .sl-thumb[data-drop="before"]::before { top: -8px; }
#face-docs-slides .sl-thumb[data-drop="after"]::after { bottom: -8px; }
#face-docs-slides .sl-thumb[data-dragging] { opacity: 0.4; }
#face-docs-slides .sl-thumb__pick {
  display: grid;
  grid-template-columns: 22px auto;
  align-items: start;
  gap: var(--s2);
  width: 100%;
  padding: 0;
  font: inherit;
  color: var(--film-ink-2);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  position: relative;
}
#face-docs-slides .sl-thumb__no { font-size: var(--t-xs); text-align: right; padding-top: 2px; }
#face-docs-slides .sl-thumb__frame {
  position: relative;
  display: block;
  width: 176px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--film-rule);
  transition: box-shadow var(--dur-state) var(--ease);
}
#face-docs-slides .sl-thumb__slide { transform: scale(var(--sl-thumb-k, 0.1375)); pointer-events: none; }
#face-docs-slides .sl-thumb[aria-current="true"] .sl-thumb__pick { color: var(--film-ink); font-weight: 600; }
#face-docs-slides .sl-thumb[aria-current="true"] .sl-thumb__frame { box-shadow: 0 0 0 2px var(--signal); }
#face-docs-slides .sl-thumb[data-hidden] .sl-thumb__frame { opacity: 0.45; }
#face-docs-slides .sl-thumb__pick:hover .sl-thumb__frame { box-shadow: 0 0 0 1px var(--film-ink-3); }
#face-docs-slides .sl-thumb[aria-current="true"] .sl-thumb__pick:hover .sl-thumb__frame { box-shadow: 0 0 0 2px var(--signal); }
#face-docs-slides .sl-thumb__pick:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 3px; }
#face-docs-slides .sl-thumb__fx { position: absolute; left: 4px; top: 22px; font-size: var(--t-xs); color: var(--film-ink-3); }
#face-docs-slides .sl-addslide { align-self: flex-start; margin-left: 30px; }

/* Format and Animate. */
#face-docs-slides .sl-format, #face-docs-slides .sl-animate { display: flex; flex-direction: column; gap: var(--s3); }
#face-docs-slides .sl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
#face-docs-slides .sl-num { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs); color: var(--film-ink-2); }
#face-docs-slides .sl-num .field__input { min-height: 36px; padding: 4px var(--s2); font-variant-numeric: tabular-nums; }
#face-docs-slides .sl-check { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
#face-docs-slides .sl-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
#face-docs-slides .sl-swatch {
  width: 26px; height: 26px; padding: 0;
  background: var(--c);
  border: 1px solid var(--film-rule);
  border-radius: 50%;
  cursor: pointer;
}
#face-docs-slides .sl-swatch--none { background: linear-gradient(135deg, transparent 45%, var(--film-bad) 45% 55%, transparent 55%), var(--film-raise); }
#face-docs-slides .sl-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--film-base, #fff), 0 0 0 4px var(--signal); }
#face-docs-slides .sl-swatch:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 3px; }
#face-docs-slides .sl-fxlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
#face-docs-slides .sl-fx { border: var(--hairline) solid var(--film-rule); border-radius: 6px; }
#face-docs-slides .sl-fx[data-on] { border-color: var(--signal); }
#face-docs-slides .sl-fx__pick {
  display: grid; grid-template-columns: 22px auto minmax(0, 1fr); align-items: center; gap: var(--s2);
  width: 100%; min-height: 40px; padding: var(--s1) var(--s2);
  font: inherit; font-size: var(--t-sm); text-align: left; color: var(--film-ink);
  background: none; border: 0; cursor: pointer;
}
#face-docs-slides .sl-fx__step { color: var(--film-ink-3); text-align: center; }
#face-docs-slides .sl-fx__kind { font-weight: 600; }
#face-docs-slides .sl-fx__kind--entr { color: var(--film-good, #2f7a4a); }
#face-docs-slides .sl-fx__kind--exit { color: var(--film-bad); }
#face-docs-slides .sl-fx__box { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--film-ink-2); }
#face-docs-slides .sl-fx__opts { display: none; flex-direction: column; gap: var(--s2); padding: 0 var(--s2) var(--s2); }
#face-docs-slides .sl-fx[data-on] .sl-fx__opts { display: flex; }
#face-docs-slides .sl-fx__opts .field__input { min-height: 36px; padding: 4px var(--s2); }

/* Presenting: the slide alone, as large as the screen allows. */
.sl-show {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: #0B0C0E;
  outline: none;
  cursor: none;
}
.sl-show:hover { cursor: default; }
.sl-show__frame { position: relative; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; }
.sl-show__stage { position: relative; width: calc(var(--sl-w, 1280px) * var(--k, 1)); height: calc(var(--sl-h, 720px) * var(--k, 1)); overflow: hidden; }
.sl-show__stage > .sl-slide { position: absolute; left: 0; top: 0; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.sl-show__frame { --k: 1; }
.sl-show__no { position: fixed; right: 16px; bottom: 12px; margin: 0; font-size: 12px; color: rgba(238, 241, 240, 0.45); }
.sl-show--window { position: fixed; }
body.sl-audience { margin: 0; background: #0B0C0E; overflow: hidden; }

/* An HTML deck, shown as itself in its sandboxed frame. */
.sl-htmlview {
  position: fixed;
  inset: 0;
  z-index: 390;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #0B0C0E;
  color: #EEF1F0;
}
.sl-htmlview__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; }
.sl-htmlview__bar .pill { color: #EEF1F0; border-color: rgba(238, 241, 240, 0.3); background: transparent; }
.sl-htmlview__name { margin: 0; font-weight: 600; }
.sl-htmlview__say { margin: 0 auto 0 0; font-size: 12px; color: rgba(238, 241, 240, 0.7); }
.sl-htmlview__stage { position: relative; overflow: hidden; display: grid; place-items: center; }
.sl-htmlview:fullscreen .sl-htmlview__bar { display: none; }
.sl-htmlframe { border: 0; background: #fff; transform-origin: 50% 50%; flex: none; }
/* A deck being read is shown, small, in the corner: a frame that is off
   screen, hidden or transparent is held still by the browser, and its
   movements never play. */
.sl-htmlframe--off {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 420;
  transform: scale(0.2);
  transform-origin: 100% 100%;
  pointer-events: none;
  box-shadow: 0 0 0 5px #0B0C0E, 0 12px 40px rgb(0 0 0 / 0.4);
}
#face-docs-slides .sl-report { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-sm); }
#face-docs-slides .sl-report li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s2); }

/* The presenter's view. */
.sl-presenter {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px;
  background: #15171A;
  color: #EEF1F0;
  outline: none;
}
.sl-presenter__now { min-height: 0; }
.sl-presenter__now .sl-show__frame, .sl-presenter__next .sl-show__frame { width: 100%; height: 100%; }
.sl-presenter__side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sl-presenter__label { margin: 0; font-size: 12px; color: rgba(238, 241, 240, 0.6); }
.sl-presenter__next { height: 30%; min-height: 120px; }
.sl-presenter__next .sl-slide { transform: scale(var(--k, 0.2)); }
.sl-presenter__end { margin: 0; padding: 40px; font-size: 40px; color: #EEF1F0; }
.sl-presenter__notes { flex: 1; overflow-y: auto; font-size: 22px; line-height: 1.45; white-space: pre-wrap; }
.sl-presenter__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.sl-presenter__bar .pill { color: #EEF1F0; border-color: rgba(238, 241, 240, 0.3); background: transparent; }
.sl-presenter__clock { margin-left: auto; font-size: 22px; font-variant-numeric: tabular-nums; }
.sl-presenter__no { font-size: 14px; color: rgba(238, 241, 240, 0.75); }

@media (max-width: 860px) {
  #face-docs-slides .sl-desk { padding: 12px; }
  /* The desk is scaled to fit the slide across a narrow screen, and the
     notes with it; they are set at the screen's own reading size whatever
     that scale (the shell's --ed-zoom), and take the room under the slide. */
  #face-docs-slides .sl-desk { gap: calc(12px / var(--ed-zoom, 1)); }
  /* The slide as wide as the screen allows (the shell's fit is told). */
  #face-docs-slides .ed-zoom { padding-inline: 6px; }
  #face-docs-slides .sl-notes__text {
    min-height: calc(160px / var(--ed-zoom, 1));
    padding: calc(12px / var(--ed-zoom, 1));
    font-size: calc(16px / var(--ed-zoom, 1));
    border-width: calc(1px / var(--ed-zoom, 1));
    border-radius: calc(6px / var(--ed-zoom, 1));
  }
  #face-docs-slides .sl-thumb__frame { width: 140px; }
  .sl-presenter { grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow-y: auto; }
}

/* A reload of an open document: the landing stays out of sight until the
   document is back (js/early.js, docs/room.js). The room's film and the top
   bar are what shows meanwhile. */
html[data-reopening] main,
html[data-reopening] .footer { visibility: hidden !important; }
html[data-motion="on"][data-reopened] .shell {
  /* Its own name: the room's entrance, under the same name, may still be on
     the shell, and an animation that keeps its name does not start again. */
  animation: docs-reopen-fold var(--beat-assemble) var(--ease-soft) both;
  transform-origin: 50% 0;
}
@keyframes docs-reopen-fold {
  from { opacity: 0; transform: perspective(900px) rotateX(-34deg); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   The shelf: recent documents under the island, the library, versions.
   ========================================================================== */

.face[data-face="docs-idle"] .shelf {
  margin: var(--s2) var(--s2) var(--s1);
  padding-top: var(--s3);
  border-top: 2px solid transparent;
  background: linear-gradient(90deg, var(--film-rule) 0 100%) top / 100% 1px no-repeat;
}
/* Arriving while the entry is already in view (docs/room.js): a fade, which
   is not movement, so it plays with reduced motion too. */
.face[data-face="docs-idle"] .shelf[data-arriving] { animation: docs-shelf-in 320ms var(--ease-soft, ease) both; }
@keyframes docs-shelf-in { from { opacity: 0; } to { opacity: 1; } }
[data-face^="docs-"] .shelf__head {
  display: flex;
  justify-content: space-between;
  margin: 0 var(--s2) var(--s2);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--film-ink-2);
}
[data-face^="docs-"] .shelf__head .mono { font-weight: 400; color: var(--film-ink-3); }
[data-face^="docs-"] .shelf__list { list-style: none; margin: 0; padding: 0; }
[data-face^="docs-"] .shelf__item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  border-radius: var(--knob-radius);
}
[data-face^="docs-"] .shelf__list--all .shelf__item { border-bottom: var(--hairline) solid var(--film-rule); padding: var(--s1) 0; }
[data-face^="docs-"] .shelf__open {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  /* One height for every row, with a miniature or with a mark. */
  min-height: 60px;
  gap: var(--s3);
  padding: var(--s2);
  font: inherit;
  color: var(--film-ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--knob-radius);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
[data-face^="docs-"] .shelf__open:hover { background: var(--react-bar-hover); transform: translateY(var(--react-rise-y)); }
[data-face^="docs-"] .shelf__open:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
[data-face^="docs-"] .shelf__paper { height: 26px; width: 28px; justify-self: center; }
[data-face^="docs-"] .shelf__paper path { fill: none; stroke: var(--paper-mark); }
[data-face^="docs-"] .shelf__paper { fill: var(--paper); stroke: var(--paper-ink); stroke-width: 1.4; filter: drop-shadow(1px 1px 0 var(--paper-under)); }
[data-face^="docs-"] .shelf__paper .kind__under { fill: var(--paper-under); }
/* A first page in miniature: a sheet of the room's paper, its own shape (a
   page upright, a slide on its side), with the same small shadow under it as
   the paper marks beside it. */
[data-face^="docs-"] .shelf__thumb {
  justify-self: center;
  display: block;
  width: 32px;
  height: 44px;
  overflow: hidden;
  background: #FFFEFB;
  border: var(--hairline) solid var(--paper-ink);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--paper-under);
}
[data-face^="docs-"] .shelf__thumb[data-shape="wide"] { width: 44px; height: 25px; }
[data-face^="docs-"] .shelf__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
[data-face^="docs-"] .shelf__title { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-face^="docs-"] .shelf__meta { font-size: var(--t-xs); color: var(--film-ink-3); white-space: nowrap; }
[data-face^="docs-"] .shelf__all {
  margin: var(--s1) var(--s2) var(--s2);
  padding: var(--s2) 0;
  font: inherit;
  font-size: var(--t-xs);
  color: var(--signal);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
[data-face^="docs-"] .shelf__all:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
[data-face^="docs-"] .shelf__none { padding: var(--s3) 0; font-size: var(--t-sm); color: var(--film-ink-3); }

/* Finding, pinning, grouping (shelf.js). */
[data-face^="docs-"] .shelf__head { align-items: center; gap: var(--s3); }
[data-face^="docs-"] .shelf__label { margin: 0; font: inherit; }
[data-face^="docs-"] .shelf__find {
  width: min(200px, 45%);
  height: 30px;
  padding: 0 var(--s2);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--film-ink);
  background: var(--film-raise);
  border: var(--hairline) solid var(--film-rule);
  border-radius: var(--knob-radius);
}
[data-face^="docs-"] .shelf__find::placeholder { color: var(--film-ink-3); }
[data-face^="docs-"] .shelf__find:focus { outline: none; border-color: var(--signal); }
[data-face^="docs-"] .shelf__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-face^="docs-"] .shelf__found {
  font-size: var(--t-xs);
  color: var(--film-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-face^="docs-"] .shelf__found mark { color: inherit; background: var(--paper-signal-wash, rgba(60, 90, 120, 0.16)); border-radius: 2px; padding: 0 1px; }
/* A pin, drawn: the head and the point, in the room's ink. */
[data-face^="docs-"] .shelf__pin {
  display: inline-block;
  width: 11px;
  height: 14px;
  margin-left: var(--s2);
  vertical-align: -2px;
  background: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Ccircle cx='5' cy='4' r='3.4'/%3E%3Cpath d='M4.3 6.5h1.4L5 12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Ccircle cx='5' cy='4' r='3.4'/%3E%3Cpath d='M4.3 6.5h1.4L5 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-face^="docs-"] .shelf__more {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--film-ink-2);
  background: none;
  border: 0;
  border-radius: var(--knob-radius);
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease);
}
[data-face^="docs-"] .shelf__more svg { width: 20px; height: 20px; fill: currentColor; }
[data-face^="docs-"] .shelf__more:hover, [data-face^="docs-"] .shelf__more[aria-expanded="true"] { background: var(--film-raise-hi); color: var(--film-ink); }
[data-face^="docs-"] .shelf__more:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
[data-face^="docs-"] .shelf__rename { flex: 1; min-width: 0; height: 40px; min-height: 0; margin: 2px 0; padding: 0 var(--s2); font-size: var(--t-sm); }
[data-face^="docs-"] .shelf__open:disabled { cursor: default; opacity: 0.72; }
[data-face^="docs-"] .shelf__open:disabled:hover { background: none; transform: none; }
#face-docs-library .lib__kinds { margin: var(--s3) 0 0; }
#face-docs-library .lib__kinds .pill .mono { margin-left: 6px; font-weight: 400; opacity: 0.7; }
#face-docs-library .lib__group { margin-top: var(--s4); }
#face-docs-library .lib__group .shelf__head { margin: 0 0 var(--s1); }
#face-docs-library .lib__undo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3);
  font-size: var(--t-sm);
  background: var(--film-raise);
  border-left: 3px solid var(--signal);
  border-radius: var(--knob-radius);
}
#face-docs-library .lib__undo[hidden] { display: none; }
#face-docs-library .lib__undo .shelf__all { margin: 0; padding: 0; font-size: var(--t-sm); }
#face-docs-library .lib__trash { margin-top: var(--s4); padding-top: var(--s2); border-top: var(--hairline) solid var(--film-rule); }
#face-docs-library .lib__trash .shelf__all { margin-left: 0; }
#face-docs-library .lib__trash .shelf__item .pill { flex: none; }
[data-face^="docs-"] [data-armed] { color: var(--film-bad); border-color: var(--film-bad); }
.stage[data-state="docs-library"] .shell,
.stage[data-state="docs-versions"] .shell { width: min(100%, 760px); }
#face-docs-versions .shelf__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); padding: var(--s2) 0; }
#face-docs-versions .shelf__item .pill { grid-row: 1 / 3; grid-column: 2; align-self: center; }
@media (max-width: 560px) {
  [data-face^="docs-"] .shelf__open { grid-template-columns: 36px minmax(0, 1fr); row-gap: 2px; min-height: 56px; }
  [data-face^="docs-"] .shelf__paper, [data-face^="docs-"] .shelf__thumb { grid-row: 1 / 3; }
  [data-face^="docs-"] .shelf__thumb { width: 28px; height: 38px; }
  [data-face^="docs-"] .shelf__thumb[data-shape="wide"] { width: 36px; height: 20px; }
  [data-face^="docs-"] .shelf__meta { grid-column: 2; }
}

.face[data-face="docs-new"] .templates { margin-top: var(--s4); padding-top: var(--s3); border-top: var(--hairline) solid var(--film-rule); }

/* Whether the work is kept: quiet, mono, under the name. */
[data-face^="docs-"] .docs-kept { margin: 2px 0 0; font-size: var(--t-xs); color: var(--film-ink-3); }
[data-face^="docs-"] .docs-kept[data-bad="yes"] { color: var(--film-bad); }

/* ==========================================================================
   The command palette: a slip of paper laid over the top of the work.
   ========================================================================== */

.pal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 12vh var(--s4) var(--s4);
  background: rgb(var(--shade-rgb) / 0.35);
}
.pal[hidden] { display: none; }
.pal__sheet {
  width: min(100%, 600px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  color: #221E19;
  background: #FFFEFB;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(34, 30, 25, 0.2), 3px 3px 0 0 #E9E3D6, 3px 3px 0 1px rgba(34, 30, 25, 0.16);
  transform-origin: 50% 0;
  animation: pal-unfold var(--dur-face, 360ms) var(--ease, ease-out) both;
  overflow: hidden;
}
@keyframes pal-unfold { from { opacity: 0; transform: perspective(900px) rotateX(-18deg); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
.pal__q {
  width: 100%;
  min-height: 52px;
  padding: var(--s3) var(--s4);
  font: inherit;
  font-size: var(--t-md);
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(34, 30, 25, 0.14);
  outline: none;
}
.pal__q::placeholder { color: rgba(34, 30, 25, 0.5); }
.pal__list { list-style: none; margin: 0; padding: var(--s1) 0; overflow-y: auto; }
.pal__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  font-size: var(--t-sm);
  cursor: pointer;
}
.pal__list li[aria-selected="true"] { background: rgba(60, 90, 120, 0.12); box-shadow: inset 2px 0 0 #3C5A78; }
.pal__group { font-size: var(--t-xs); color: rgba(34, 30, 25, 0.62); }
.pal__keys { font-size: var(--t-xs); padding: 1px 6px; border: 1px solid rgba(34, 30, 25, 0.22); border-radius: 3px; color: rgba(34, 30, 25, 0.8); }
.pal__none { color: rgba(34, 30, 25, 0.62); cursor: default; }
.pal__foot { margin: 0; padding: var(--s2) var(--s4); font-size: var(--t-xs); color: rgba(34, 30, 25, 0.62); border-top: 1px solid rgba(34, 30, 25, 0.1); }
@media (prefers-reduced-motion: reduce) { .pal__sheet { animation: none; } }

/* ==========================================================================
   Printing: only the document.
   ========================================================================== */

#docs-print { display: none; }
@media print {
  html[data-printing] body > *:not(#docs-print) { display: none !important; }
  html[data-printing] body { background: #fff !important; min-height: 0 !important; display: block !important; }
  html[data-printing] #docs-print { display: block; color: #000; }
  #docs-print .wr-print { font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif; font-size: 12pt; line-height: 1.38; color: #111; }
  #docs-print .wr-print p { margin: 0 0 8pt; }
  #docs-print .wr-print h1 { font-size: 20pt; margin: 0 0 6pt; }
  #docs-print .wr-print h2 { font-size: 16pt; margin: 14pt 0 5pt; }
  #docs-print .wr-print h3 { font-size: 13.5pt; margin: 12pt 0 4pt; }
  #docs-print .wr-print table { width: 100%; border-collapse: collapse; }
  #docs-print .wr-print td, #docs-print .wr-print th { border: 1px solid #999; padding: 3pt 5pt; }
  #docs-print .wr-print img { max-width: 100%; }
  #docs-print .wr-print hr.pagebreak { break-after: page; border: 0; height: 0; margin: 0; }
  #docs-print .sh-print__title { font: 700 14pt Arial, sans-serif; margin: 0 0 8pt; }
  #docs-print .sh-print { border-collapse: collapse; font: 9pt Arial, sans-serif; }
  #docs-print .sh-print td { border: 0.5pt solid #bbb; padding: 2pt 4pt; white-space: nowrap; }
  #docs-print .sh-print td.n { text-align: right; }
  #docs-print .sh-print td.b { font-weight: 700; }
  #docs-print .sh-print td.i { font-style: italic; }
  #docs-print .sh-print td.al-center { text-align: center; }
  #docs-print .sh-print td.al-right { text-align: right; }
  #docs-print .sl-print-page { width: 297mm; height: 167mm; overflow: hidden; break-after: page; }
  #docs-print .sl-print-scale { transform: scale(0.8766); transform-origin: 0 0; }
  #docs-print .pdf-print-page { display: block; width: 100%; height: auto; break-after: page; }
  #docs-print .notes-print { font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif; font-size: 11.5pt; line-height: 1.5; }
}

/* ==========================================================================
   The PDF bench's column: sections that open and close, the marks drawn on
   a page, blacking out, bookmarks, the comparison and the password dialog.
   ========================================================================== */

/* Mark colours: document colours, like the paper's own, and the same
   numbers `geom.js` writes into the file. */
[data-face^="docs-"], .docs-dialog {
  --mark-yellow: rgb(255 214 56);
  --mark-green: rgb(120 204 97);
  --mark-blue: rgb(102 158 245);
  --mark-red: rgb(224 61 51);
  --mark-ink: rgb(31 31 36);
  --mark-redact: rgb(0 0 0 / 0.82);
  --cmp-out: rgb(224 61 51 / 0.16);
  --cmp-out-line: rgb(196 46 36);
  --cmp-in: rgb(120 204 97 / 0.2);
  --cmp-in-line: rgb(54 128 48);
}

/* Where the work says how it is going: at the top of the column, where the
   eye already is, and not at the foot of a column that may be scrolled. */
#face-docs-pdf .bench__status {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--film-shell-solid);
}
#face-docs-pdf .bench__status:has(> :not([hidden])) { padding-bottom: var(--s3); }
#face-docs-pdf .bench__status .panel__alert { margin: 0; }
#face-docs-pdf .bench__status .docs-progress { margin: 0; }

/* A heading that carries a tip: a long press shows the tip rather than
   selecting the word. */
[data-face^="docs-"] :is(h2, h3)[data-tip] { cursor: help; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* A section that opens: the heading is the button, and what is inside is its
   tip (on hover, focus or a long press), not a line under it. */
[data-face^="docs-"] .tool--fold { gap: var(--s1); padding: var(--s3) 0; }
[data-face^="docs-"] .tool--fold[data-open] { padding-bottom: var(--s4); }
[data-face^="docs-"] .tool--fold .tool__name { display: block; }
[data-face^="docs-"] .tool__head {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0;
  padding: var(--s1) 0;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--film-ink);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
[data-face^="docs-"] .tool__title { display: inline-flex; align-items: center; gap: var(--s2); }
/* The mark that says open or shut: a short rule that becomes a cross bar. */
[data-face^="docs-"] .tool__title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--film-ink-3);
  border-bottom: 1.5px solid var(--film-ink-3);
  transform: translateY(-2px) rotate(-45deg);
  transition: transform var(--dur-state) var(--ease);
}
[data-face^="docs-"] .tool--fold[data-open] .tool__title::before { transform: translateY(-3px) rotate(45deg); }
[data-face^="docs-"] .tool__head:hover .tool__title { color: var(--film-ink); text-decoration: underline; text-decoration-color: var(--film-rule); text-underline-offset: 3px; }
[data-face^="docs-"] .tool__head:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
/* In use: the count is set in the room's ink. */
[data-face^="docs-"] .tool--fold[data-inuse] .tool__count { color: var(--signal); font-weight: 600; }
[data-face^="docs-"] .tool__body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-top: var(--s2);
}
[data-face^="docs-"] .tool__body[hidden] { display: none; }
[data-face^="docs-"] .tool__group {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-left: var(--s3);
  border-left: var(--hairline) solid var(--film-rule);
}
[data-face^="docs-"] .tool__group[hidden] { display: none; }
[data-face^="docs-"] .tool__sub {
  display: flex;
  justify-content: space-between;
  margin: var(--s2) 0 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--film-ink-2);
}
[data-face^="docs-"] .field-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s2); }

/* A colour as a pill: the swatch says it, the word says it to everybody. */
[data-face^="docs-"] .pill--swatch { gap: var(--s1); }
[data-face^="docs-"] .swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--paper-rule);
}
[data-face^="docs-"] [data-colour="yellow"] .swatch { background: var(--mark-yellow); }
[data-face^="docs-"] [data-colour="green"] .swatch { background: var(--mark-green); }
[data-face^="docs-"] [data-colour="blue"] .swatch { background: var(--mark-blue); }
[data-face^="docs-"] [data-colour="red"] .swatch { background: var(--mark-red); }
[data-face^="docs-"] [data-colour="ink"] .swatch { background: var(--mark-ink); }

#face-docs-pdf .leaf__tool {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--film-ink-2);
}

/* --- marks on the open page --------------------------------------------------- */

#face-docs-pdf .marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#face-docs-pdf .leaf__over[data-tool="select"] .mk { pointer-events: visiblePainted; cursor: move; }
#face-docs-pdf .leaf__over[data-tool="select"] .mk-hit,
#face-docs-pdf .leaf__over[data-tool="select"] .mk-hit-area { pointer-events: all; }
#face-docs-pdf .leaf__over:not([data-tool="select"]) { cursor: crosshair; touch-action: none; }
#face-docs-pdf .leaf__over:not([data-tool="select"]) .readlayer,
#face-docs-pdf .leaf__over:not([data-tool="select"]) .placed { pointer-events: none; }
#face-docs-pdf .mk { outline: none; }
#face-docs-pdf .mk-hit { stroke: transparent; fill: none; }
#face-docs-pdf .mk-hit-area { fill: transparent; stroke: none; }
#face-docs-pdf .mk-fill { mix-blend-mode: multiply; }
#face-docs-pdf .mk--yellow { --mk: var(--mark-yellow); }
#face-docs-pdf .mk--green { --mk: var(--mark-green); }
#face-docs-pdf .mk--blue { --mk: var(--mark-blue); }
#face-docs-pdf .mk--red { --mk: var(--mark-red); }
#face-docs-pdf .mk--ink { --mk: var(--mark-ink); }
#face-docs-pdf .mk .mk-fill { fill: var(--mk); }
#face-docs-pdf .mk .mk-stroke, #face-docs-pdf .mk-preview.mk-stroke { stroke: var(--mk); }
#face-docs-pdf .mk-note { fill: var(--mk); stroke: var(--paper-ink-2); stroke-width: 1; }
#face-docs-pdf .mk-note__lines { stroke: var(--paper-ink-2); stroke-width: 1; fill: none; }
#face-docs-pdf .mk-stamp__label {
  fill: var(--mk);
  font-family: "Docs Sans", "Liberation Sans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#face-docs-pdf .mk-k-stamp { opacity: 0.9; }
#face-docs-pdf .mk-redact { fill: var(--mark-redact); stroke: var(--mark-red); stroke-width: 1; stroke-dasharray: 4 3; }
#face-docs-pdf .mk-picked { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 5 3; }
#face-docs-pdf .mk:focus-visible .mk-picked, #face-docs-pdf .mk:focus-visible { outline: none; }
#face-docs-pdf .mk:focus-visible .mk-picked { stroke-width: 2.5; }
#face-docs-pdf .mk-preview.mk-frame { fill: var(--paper-signal-wash); stroke: var(--signal); stroke-width: 1; stroke-dasharray: 4 3; }
#face-docs-pdf .mk-preview.mk--redact.mk-frame { fill: var(--mark-redact); }
#face-docs-pdf .mk-preview { --mk: var(--signal); }
#face-docs-pdf .mk-preview.mk--yellow { --mk: var(--mark-yellow); }
#face-docs-pdf .mk-preview.mk--green { --mk: var(--mark-green); }
#face-docs-pdf .mk-preview.mk--blue { --mk: var(--mark-blue); }
#face-docs-pdf .mk-preview.mk--red { --mk: var(--mark-red); }
#face-docs-pdf .mk-preview.mk--ink { --mk: var(--mark-ink); }
#face-docs-pdf .mk-crop__shade { fill: var(--paper-ink); opacity: 0.38; }
#face-docs-pdf .mk-crop__frame { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 6 4; }

#face-docs-pdf .sheet[data-redacted="yes"] .sheet__paper { box-shadow: 0 0 0 1px var(--paper-rule), 2px 2px 0 0 var(--mark-ink), 2px 2px 0 1px var(--paper-rule); }
#face-docs-pdf .sheet[data-redacted="yes"] .sheet__from::before { content: "boxes "; color: var(--film-ink-2); }
#face-docs-pdf .sheet[data-cropped="yes"] .sheet__from::after { content: " cropped"; color: var(--film-ink-3); }

/* --- bookmarks --------------------------------------------------------------------- */

#face-docs-pdf .bmlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
#face-docs-pdf .bmlist:empty { display: none; }
#face-docs-pdf .bm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1);
  padding-left: calc(var(--level, 0) * var(--s3));
}
#face-docs-pdf .bm__title { min-height: 34px; padding: var(--s1) var(--s2); font-size: var(--t-xs); }
#face-docs-pdf .bm__page { min-height: 34px; }
#face-docs-pdf .bm__tools { grid-column: 1 / -1; display: flex; gap: var(--s1); }
#face-docs-pdf .bm__act { min-height: 26px; min-width: 30px; padding: 0 var(--s2); }

/* --- two versions side by side --------------------------------------------------------- */

#face-docs-pdf .desk--compare .leaf__bar { position: sticky; top: 0; z-index: 2; background: var(--film-shell-solid); }
#face-docs-pdf .cmp { display: flex; flex-direction: column; gap: var(--s5); }
#face-docs-pdf .cmp__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  font-size: var(--t-xs);
  color: var(--film-ink-2);
  overflow-wrap: anywhere;
}
#face-docs-pdf .cmp__head em { font-style: normal; color: var(--film-ink-3); }
#face-docs-pdf .cmp__row { display: flex; flex-direction: column; gap: var(--s2); }
#face-docs-pdf .cmp__label { margin: 0; font-size: var(--t-xs); font-weight: 400; color: var(--film-ink-2); }
#face-docs-pdf .cmp__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
#face-docs-pdf .cmp__page {
  position: relative;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper-rule), 2px 2px 0 0 var(--paper-under), 2px 2px 0 1px var(--paper-rule);
}
#face-docs-pdf .cmp__page--none {
  display: grid;
  place-items: center;
  min-height: 160px;
  font-size: var(--t-xs);
  color: var(--paper-ink-3);
  background: var(--paper-tint);
  box-shadow: inset 0 0 0 1px var(--paper-rule);
}
#face-docs-pdf .cmp__canvas { display: block; width: 100%; height: auto; }
#face-docs-pdf .cmp__box { position: absolute; pointer-events: none; }
#face-docs-pdf .cmp__box--out { background: var(--cmp-out); box-shadow: inset 0 0 0 1.5px var(--cmp-out-line); }
#face-docs-pdf .cmp__box--in { background: var(--cmp-in); box-shadow: inset 0 0 0 1.5px var(--cmp-in-line); }
#face-docs-pdf .cmp__words {
  margin: 0;
  max-width: 80ch;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--film-ink-2);
}
#face-docs-pdf .cmp__words del { color: var(--cmp-out-line); background: var(--cmp-out); text-decoration: line-through; padding: 0 2px; }
#face-docs-pdf .cmp__words ins { color: var(--cmp-in-line); background: var(--cmp-in); text-decoration: underline; padding: 0 2px; }

/* --- the password dialog ------------------------------------------------------------- */

.docs-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: var(--s5);
  color: var(--film-ink);
  background: var(--film-shell-solid);
  border: var(--hairline) solid var(--film-rule);
  border-radius: var(--knob-radius);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.22);
}
.docs-dialog::backdrop { background: rgb(0 0 0 / 0.32); }
.docs-dialog__form { display: flex; flex-direction: column; gap: var(--s3); margin: 0; }
.docs-dialog__title { margin: 0; font-size: var(--t-md, 1.1rem); }
.docs-dialog__text { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--film-ink-2); }
.docs-dialog__bad { margin: 0; font-size: var(--t-xs); color: var(--film-bad); }
.docs-dialog .field { display: flex; flex-direction: column; gap: var(--s1); }
.docs-dialog .field__label { font-size: var(--t-xs); font-weight: 600; color: var(--film-ink-2); }
.docs-dialog .field__input {
  min-height: 40px; padding: var(--s2) var(--s3); font: inherit; font-size: var(--t-sm); color: var(--film-ink);
  background: var(--film-raise); border: var(--hairline) solid var(--film-rule); border-radius: var(--knob-radius);
}
.docs-dialog .field__input:focus { outline: none; border-color: var(--signal); }
.docs-dialog__go { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* --- the signing sheet (sign.js) ------------------------------------------------------ */

/* A strip of paper with a line to sign on, as on a printed form. */
.sign-sheet { width: min(600px, calc(100vw - 32px)); }
.sign { display: flex; flex-direction: column; gap: var(--s3); }
.sign__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.sign__tabs { display: flex; gap: 2px; padding: 2px; background: var(--film-raise); border: var(--hairline) solid var(--film-rule); border-radius: 999px; }
.sign__tab {
  min-height: 34px; padding: 0 var(--s3); font: inherit; font-size: var(--t-sm); color: var(--film-ink-2);
  background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.sign__tab[aria-selected="true"] { color: var(--film-shell-solid); background: var(--film-ink); }
.sign__tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sign__count { opacity: 0.75; }
.sign__panel[hidden] { display: none; }
.sign__padwrap {
  position: relative;
  height: clamp(170px, 32vh, 240px);
  overflow: hidden;
  background: #FFFEFB;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--film-rule), 2px 2px 0 0 rgba(29, 27, 24, 0.08);
}
.sign__pad { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sign__line { position: absolute; left: 7%; right: 7%; bottom: 28%; border-top: 1px solid rgba(28, 42, 68, 0.32); pointer-events: none; }
.sign__hint { position: absolute; left: 7%; bottom: calc(28% + 6px); font-size: var(--t-sm); color: rgba(28, 42, 68, 0.5); pointer-events: none; }
.sign__hint[hidden] { display: none; }
.sign__padtools { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sign__padtools [hidden] { display: none; }
.sign__type { display: flex; flex-direction: column; gap: var(--s3); }
.sign__typed {
  min-height: 92px; margin: 0; padding: 0 var(--s4);
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  font-size: 44px; line-height: 1.1; color: #1C2A44; background: #FFFEFB;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--film-rule);
}
.sign__keptlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.sign__keptitem { position: relative; }
.sign__keptuse {
  width: 100%; height: 88px; padding: var(--s2) var(--s5) var(--s2) var(--s2);
  display: flex; align-items: center; justify-content: center;
  background: #FFFEFB; border: 0; border-radius: 2px; box-shadow: 0 0 0 1px var(--film-rule); cursor: pointer;
}
.sign__keptuse img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.sign__keptuse:hover, .sign__keptuse:focus-visible { box-shadow: 0 0 0 2px var(--signal); outline: none; }
.sign__keptdel {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px;
  display: grid; place-items: center; color: var(--film-ink-2); background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.sign__keptdel svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sign__keptdel:hover, .sign__keptdel:focus-visible { color: var(--film-bad); background: var(--film-raise); outline: none; }
.sign__keep { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.sign__keep[hidden] { display: none; }
.sign__note { font-size: var(--t-xs); }
.sign__use[hidden] { display: none; }

/* A tablet: a roomier pad. */
@media (min-width: 700px) and (pointer: coarse) {
  .sign-sheet { width: min(760px, calc(100vw - 48px)); }
  .sign__padwrap { height: clamp(240px, 34vh, 340px); }
}
/* A phone: the whole screen, the pad taking what is left. */
@media (max-width: 599px), (max-height: 480px) and (pointer: coarse) {
  .sign-sheet { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: var(--s4); border: 0; border-radius: 0; }
  .sign { height: 100%; }
  .sign__draw { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s2); }
  .sign__padwrap { flex: 1; height: auto; min-height: 120px; }
  .sign__note { display: none; }
  /* The pad's own buttons in its top corner, so the pad has the room. */
  .sign__draw { position: relative; }
  .sign__padtools { position: absolute; top: var(--s2); right: var(--s2); z-index: 1; gap: var(--s1); justify-content: flex-end; }
  .sign__padtools .ghost { min-height: 36px; padding: 0 var(--s3); font-size: var(--t-sm); background: var(--film-shell-solid); }
}
/* An upright phone with the pad turned: the sheet laid out as if the phone
   were held on its side, so the signature runs along the long edge. */
.sign-sheet[data-turned] { padding: 0; }
.sign-sheet[data-turned] .sign {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vh;
  width: 100dvh;
  height: 100vw;
  padding: var(--s4);
  transform-origin: 0 0;
  transform: translateX(100vw) rotate(90deg);
}

@media (max-width: 860px) {
  #face-docs-pdf .bench__status { position: static; }
  #face-docs-pdf .cmp__pair, #face-docs-pdf .cmp__head { gap: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  [data-face^="docs-"] .tool__title::before { transition: none; }
}

/* A face laid out off screen for a moment, so another face can borrow its
   measuring: the PDF bench turning a Word file into pages through the Doc. */
.face[data-face^="docs-"].is-measuring {
  display: block;
  position: fixed;
  left: -40000px;
  top: 0;
  width: 1200px;
  visibility: hidden;
  pointer-events: none;
  opacity: 1;
}

/* ==========================================================================
   The editing shell (js/docs/shell/): app bar, menus, toolbar, panels,
   status bar, zoom and the folded corner. One frame for every kind.
   ========================================================================== */

/* An editor takes the island over: wide, as tall as the window allows, no
   padding of its own -- the frame inside draws its own edges. */
.shell:has(> .shell__faces > .face.is-active[data-editor]) { width: min(100%, 1680px); }
.face[data-face^="docs-"][data-editor] { padding: 0; }
/* An editor is an application: the window is the page. The site's foot
   steps aside while one is open, and the editor is made exactly as tall as
   what is left (editor-shell.js measures it), so the page itself never
   scrolls -- only the canvas and the panels do, inside themselves. */
body:has(.face.is-active[data-editor]) .footer { display: none; }
body:has(.face.is-active[data-editor]) main { padding-bottom: var(--s3); align-items: flex-start; }

/* The page corner: the island's top-right corner is folded down. The cut
   is the island's own shape, so the film shows through where the corner
   was; the flap is the paper folded over onto the page. */
.shell:has(> .shell__faces > .face.is-active[data-editor]) {
  clip-path: polygon(0 0, calc(100% - var(--fold, 30px)) 0, 100% var(--fold, 30px), 100% 100%, 0 100%);
  border-top-right-radius: 0;
}
html[data-ed-full] .shell:has(> .shell__faces > .face.is-active[data-editor]) {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: auto !important;
  max-width: none;
  height: auto !important;
  border-radius: 0;
  border: 0;
  --fold: 22px;
  background: var(--film-shell-solid);
  transform: none !important;
}
html[data-ed-full] body { overflow: hidden; }

.ed {
  --ed-bar: var(--film-shell-solid);
  --ed-desk: color-mix(in srgb, var(--film-shell-solid) 93%, var(--film-ink));
  --ed-line: var(--film-rule);
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: clamp(540px, calc(100dvh - 176px), 2400px);
  color: var(--film-ink);
  background: var(--ed-bar);
}
html[data-ed-full] .ed { height: 100dvh !important; }

/* --- app bar ------------------------------------------------------------------ */

.ed-bar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2) var(--s3);
  /* The two ends balance: Download stands as far from the folded corner as
     Back's chevron does from the left edge (its 40px button centres a 20px
     arrow, 10px in, behind the island's hairline). */
  padding: var(--s2) calc(var(--fold, 30px) + var(--s3) + 10px + var(--hairline)) var(--s1) var(--s3);
}
.ed-back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--film-ink-2);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.ed-back .ic { transform: rotate(90deg); }
.ed-back:hover { background: var(--film-raise-hi); color: var(--film-ink); }
.ed-back:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.ed-kind { display: grid; place-items: center; width: 28px; height: 28px; color: var(--signal); }
.ed-kind .ic { width: 24px; height: 24px; }
.ed-head { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-titleline { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.ed-name {
  min-width: 4ch;
  max-width: min(46ch, 100%);
  width: auto;
  field-sizing: content;
  padding: 2px var(--s1);
  /* The words line up with the menus below, and the saved time sits one gap
     (12px) from the last letter rather than from the field's padding. */
  margin-left: calc(var(--s1) * -1);
  margin-right: calc((var(--s1) + var(--hairline) + var(--name-slack, 0px)) * -1);
  font: inherit;
  font-size: var(--t-md, 1.05rem);
  font-weight: 600;
  color: var(--film-ink);
  background: none;
  border: var(--hairline) solid transparent;
  border-radius: 6px;
  text-overflow: ellipsis;
  transition: border-color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
.ed-name:hover:not(:read-only) { border-color: var(--film-rule); }
.ed-name:focus { outline: none; border-color: var(--signal); background: var(--film-raise); }
.ed-saved { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--film-ink-3); white-space: nowrap; }
.ed-saved[data-bad="yes"] { color: var(--film-bad); }
.ed-bar__end { display: flex; align-items: center; gap: var(--s2); }

/* The menu row. */
.ed-menubar { display: flex; flex-wrap: nowrap; gap: 0; min-width: 0; overflow: hidden; margin-left: calc(var(--s2) * -1); }
.ed-menubar__item[hidden] { display: none; }
.ed-menubar__item {
  flex: none;
  white-space: nowrap;
  padding: 3px var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--film-ink-2);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.ed-menubar__item:hover, .ed-menubar__item.is-open, .ed-menubar__item[aria-expanded="true"] { background: var(--film-raise-hi); color: var(--film-ink); }
.ed-menubar__item:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }

/* Zoom and download. */
.ed-zoomctl { display: flex; align-items: center; border: var(--hairline) solid var(--ed-line); border-radius: 999px; }
.ed-zoomval {
  min-width: 5.2ch;
  padding: 0 var(--s1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--film-ink);
  background: none;
  border: 0;
  height: 32px;
  cursor: pointer;
}
.ed-zoomval:hover { color: var(--signal); }
.ed-zoomval:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; border-radius: 4px; }
.ed-zoomctl .ed-iconbtn { width: 32px; height: 32px; }
.ed-download {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  height: 36px;
  padding: 0 var(--s3) 0 var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--knob-ink);
  background: var(--knob-face);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.ed-download:hover { box-shadow: 0 0 0 2px rgb(var(--shade-rgb) / 0.3); }
.ed-download:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }

/* --- toolbar ------------------------------------------------------------------ */

.ed-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-width: 0;
  margin: 0 var(--s3) var(--s2);
  padding: 3px var(--s2);
  overflow: hidden;
  background: var(--film-raise);
  border-radius: 999px;
}
.ed-tgroup { display: flex; align-items: center; gap: 1px; flex: none; }
.ed-tgroup + .ed-tgroup { padding-left: var(--s1); border-left: var(--hairline) solid var(--ed-line); }
.ed-tgroup[hidden] { display: none; }
.ed-more { margin-left: auto; flex: none; }

.ed-iconbtn {
  display: inline-grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 4px;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  color: var(--film-ink-2);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.ed-iconbtn:hover:not(:disabled) { background: var(--film-raise-hi); color: var(--film-ink); }
.ed-iconbtn[aria-pressed="true"] { background: var(--knob-face); color: var(--knob-ink); }
/* Pressed stays pressed under the pointer: Bold turns light the moment it is
   clicked, not when the pointer leaves it. */
.ed-iconbtn[aria-pressed="true"]:hover:not(:disabled) { background: var(--knob-face-hi); color: var(--knob-ink); }
.ed-iconbtn:disabled { opacity: 0.38; cursor: default; }
.ed-iconbtn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ed-iconbtn__text { font-size: var(--t-xs); font-weight: 600; }
.ed-glyph { display: inline-block; min-width: 1em; font-size: 15px; line-height: 1; text-align: center; color: inherit; }
.ed-glyph--bold { font-weight: 800; }
.ed-glyph--italic { font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.ed-glyph--underline { text-decoration: underline; text-underline-offset: 3px; }
.ed-glyph--strike { text-decoration: line-through; }
.ic { display: block; width: 20px; height: 20px; flex: none; }
.ic .ic-fill { fill: currentColor; stroke: none; }

.ed-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: var(--w, auto);
  height: 34px;
  padding: 0 4px 0 var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--film-ink);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease);
}
.ed-picker:hover:not(:disabled), .ed-picker[aria-expanded="true"] { background: var(--film-raise-hi); }
.ed-picker:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ed-picker:disabled { opacity: 0.38; cursor: default; }
.ed-picker__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ed-picker > .ic:last-child { width: 14px; height: 14px; color: var(--film-ink-3); }
.ed-picker--swatch { padding-left: 6px; }
.ed-picker--swatch .ed-picker__val { flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--swatch); box-shadow: inset 0 0 0 1px var(--film-rule); }

/* --- menus (also every toolbar drop-down) ------------------------------------------ */

.ed-menu {
  position: fixed;
  z-index: 90;
  min-width: 220px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: var(--s1);
  color: var(--film-ink);
  background: var(--film-shell-solid);
  border: var(--hairline) solid var(--film-rule);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.08);
  animation: ed-menu-in var(--dur-state) var(--ease) both;
}
@keyframes ed-menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ed-menu__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 34px;
  padding: 3px var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  color: var(--film-ink);
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.ed-menu__item:hover, .ed-menu__item:focus { outline: none; background: var(--film-raise-hi); }
.ed-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--film-ink); }
.ed-menu__item[aria-disabled="true"] { color: var(--film-ink-3); cursor: default; }
.ed-menu__item[aria-disabled="true"]:hover { background: none; }
.ed-menu__mark { display: grid; place-items: center; color: var(--film-ink-2); }
.ed-menu__item[aria-checked="true"] .ed-menu__mark { color: var(--signal); }
.ed-menu__label { display: flex; flex-direction: column; min-width: 0; }
.ed-menu__name { display: flex; align-items: center; }
.ed-menu__hint { font-size: var(--t-xs); color: var(--film-ink-3); }
.ed-menu__keys { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--film-ink-3); }
.ed-menu__more { color: var(--film-ink-3); }
.ed-menu__more .ic { width: 16px; height: 16px; }
.ed-menu__sep { height: 1px; margin: var(--s1) var(--s2); background: var(--film-rule); }
/* A line to read in a menu (what a signed file is, as it is saved): as wide
   as the menu's own entries make it and no wider, set like the hints. */
.ed-menu__note {
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--s1) var(--s2) var(--s2) calc(24px + var(--s2) * 2);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--film-ink-3);
  text-wrap: pretty;
}
.ed-menu--plain .ed-menu__note { padding-left: var(--s2); }
.ed-menu__heading {
  padding: var(--s2) var(--s2) 2px calc(24px + var(--s2) * 2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--film-ink-3);
}


/* The notice over the work: what just happened, once. */
.ed-status { position: relative; }
/* A notice: in the status bar, over its items, one line. */
.ed-notice {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s2) 0 var(--s3);
  color: var(--film-ink);
  background: var(--ed-bar);
  border-left: 3px solid var(--state-ok, #2F6B4A);
  animation: ed-notice-in var(--dur-state) var(--ease) both;
}
@keyframes ed-notice-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ed-notice { animation: none; } }
.ed-notice[hidden] { display: none; }
.ed-notice[data-kind="bad"] { border-left-color: var(--film-bad); }
.ed-notice__text { flex: 1; min-width: 0; margin: 0; font-size: var(--t-xs); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-notice__more { flex: none; padding: 2px var(--s2); font: inherit; font-size: var(--t-xs); color: var(--signal); background: none; border: 0; border-radius: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ed-notice__more:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.ed-notice__close { flex: none; width: 26px; height: 26px; }
.ed-notice__full {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  max-height: 40vh;
  overflow-y: auto;
  padding: var(--s3);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--film-ink);
  background: var(--film-shell-solid);
  border-top: var(--hairline) solid var(--film-rule);
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.12);
}
.ed-notice__full[hidden] { display: none; }

.ed-swatch { display: block; width: 16px; height: 16px; border-radius: 4px; background: var(--sw); box-shadow: inset 0 0 0 1px var(--film-rule); }
.ed-swatch.is-on { box-shadow: inset 0 0 0 1px var(--film-rule), 0 0 0 2px var(--signal); }
.ed-menu--narrow { min-width: 96px; }
.ed-menu--narrow .ed-menu__item { grid-template-columns: 18px minmax(0, 1fr); min-height: 30px; }
/* No ticks or icons anywhere in it: no column for them (menus.js). After
   the narrow menu's rule, which it overrides when a menu is both. */
.ed-menu--plain .ed-menu__mark { display: none; }
.ed-menu--plain .ed-menu__item { grid-template-columns: minmax(0, 1fr) auto; }
.ed-menu--plain .ed-menu__heading { padding-left: var(--s2); }

/* --- the tooltip --------------------------------------------------------------------- */

.ed-tip {
  position: fixed;
  z-index: 95;
  max-width: 280px;
  padding: 4px var(--s2);
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--knob-ink);
  background: var(--knob-face);
  border-radius: 6px;
  pointer-events: none;
}
.ed-tip kbd { margin-left: var(--s1); font-family: var(--font-mono); opacity: 0.75; }

/* --- the work and the panels ------------------------------------------------------------ */

.ed-main {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 0;
  border-top: var(--hairline) solid var(--ed-line);
  border-bottom: var(--hairline) solid var(--ed-line);
}
.ed-canvas {
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--ed-desk);
  scrollbar-width: thin;
  scrollbar-color: var(--film-rule) transparent;
  overscroll-behavior: contain;
}
.ed-canvas:focus { outline: none; }
.ed-zoom { min-width: min-content; padding: var(--s5) var(--s4) var(--s7); }

.ed-panel {
  width: 296px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ed-bar);
  overflow: hidden;
}
.ed-panel[hidden] { display: none; }
.ed-panel--left { grid-column: 1; border-right: var(--hairline) solid var(--ed-line); }
.ed-panel--right { grid-column: 3; border-left: var(--hairline) solid var(--ed-line); }
.ed-panel__head {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s2) 0;
  border-bottom: var(--hairline) solid var(--ed-line);
}
.ed-panel__tabs { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; }
.ed-panel__tab {
  flex: none;
  padding: var(--s2) var(--s2) calc(var(--s2) - 2px);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--film-ink-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.ed-panel__tab:hover { color: var(--film-ink); }
.ed-panel__tab[aria-selected="true"] { color: var(--film-ink); font-weight: 600; border-bottom-color: var(--signal); }
.ed-panel__tab:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ed-panel__close { width: 32px; min-width: 32px; height: 32px; margin-bottom: 2px; }
.ed-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  scrollbar-width: thin;
}
.ed-panel__body[hidden] { display: none; }

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

.ed-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: 30px;
  padding: 0 var(--s3);
  font-size: var(--t-xs);
  color: var(--film-ink-2);
}
.ed-status__start, .ed-status__end { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.ed-status__item { padding: 2px var(--s2); white-space: nowrap; font-variant-numeric: tabular-nums; }
button.ed-status__item {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
button.ed-status__item:hover { background: var(--film-raise-hi); color: var(--film-ink); }
button.ed-status__item:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ed-status__item[data-on="yes"] { color: var(--signal); font-weight: 600; }

/* --- the folded corner -------------------------------------------------------------------- */

.ed-fold {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: calc(var(--fold, 30px) + var(--pull, 0px));
  height: calc(var(--fold, 30px) + var(--pull, 0px));
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: none;
  transform-origin: 100% 0;
  transition: width var(--dur-state) var(--ease), height var(--dur-state) var(--ease);
}
/* The back of the paper, folded down over the page: the lower-left half of
   the corner, a little darker than the page, with the hard edge of the fold
   along its long side. */
.ed-fold__flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(225deg, var(--film-ink-3) 0, color-mix(in srgb, var(--film-shell-solid) 85%, var(--film-ink)) 1px, color-mix(in srgb, var(--film-shell-solid) 94%, var(--film-ink)) 70%);
  box-shadow: inset -1px 1px 0 var(--film-rule);
  transition: background var(--dur-state) var(--ease);
}
.ed-fold::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(225deg, transparent 49%, rgb(0 0 0 / 0.16) 50%, transparent 58%);
  pointer-events: none;
}
.ed-fold:hover { --pull: 6px; }
.ed-fold:hover .ed-fold__flap { background: linear-gradient(225deg, var(--signal) 0, color-mix(in srgb, var(--film-shell-solid) 80%, var(--signal)) 1px, color-mix(in srgb, var(--film-shell-solid) 91%, var(--signal)) 70%); }
.ed-fold:focus-visible { outline: none; }
.ed-fold:focus-visible .ed-fold__flap { box-shadow: inset 0 0 0 2px var(--film-ink); }
.shell:has(> .shell__faces > .face.is-active[data-editor]) { --fold: 30px; }

/* --- narrow screens: panels lie over the work ----------------------------------------------- */

@media (max-width: 900px) {
  /* What the window leaves once the site's bar has folded away (below): the
     page's own gaps above and below. editor-shell.js measures the exact
     height after; this is so the island's morph aims at the right one and
     does not have to grow again when it lands. */
  .ed { height: calc(100dvh - 22px); }
  .ed-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ed-kind { display: none; }
  .ed-download span { display: none; }
  .ed-download { width: 40px; padding: 0; justify-content: center; }
  .ed-zoomctl [data-zoom] { display: none; }
  .ed-panel { position: absolute; top: 0; bottom: 0; z-index: 4; width: min(320px, 88%); box-shadow: 0 0 0 1px var(--film-rule), 0 12px 32px rgb(0 0 0 / 0.2); }
  /* Over the whole work, not its own empty column: placed in a column of
     no width, the drawer was 88% of nothing (one pixel of border). */
  .ed-panel--left, .ed-panel--right { grid-column: 1 / -1; }
  .ed-panel--left { left: 0; }
  .ed-panel--right { right: 0; }
}
@media (max-width: 560px) {
  .ed-status__item[data-status="words"] ~ .ed-status__item { display: none; }
  /* A phone keeps the name, the menus and the way out; zoom is in View and
     the status bar, and "kept" is said there too. */
  .ed-saved, .ed-zoomctl { display: none; }
  .ed { height: calc(100dvh - 18px); }
  /* One row for the name, the menus and the way out: the menus fold into a
     single "Menu" there (menus.js), which leaves the name most of the row. */
  .ed-head { display: contents; }
  .ed-bar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--s1);
    padding: var(--s1) calc(var(--fold, 30px) + var(--s1) + 10px + var(--hairline)) var(--s1) var(--s1);
  }
  .ed-titleline { min-width: 0; }
  .ed-name { max-width: 100%; margin-left: 0; }
  .ed-menubar { max-width: 30vw; margin-left: 0; }
  .ed-toolbar { margin: 0 var(--s2) var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-menu { animation: none; }
  .ed-fold { transition: none; }
}

/* --- a finger instead of a pointer -----------------------------------------------------------
   Where the main pointer is a finger, every control in the frame gives it
   44px each way (DESIGN.md 2.5; the building's reach in styles.css lends
   the icon buttons, pickers and pills what they do not show). The toolbar
   grows by six pixels and its buttons are a finger wide, so two reaches never
   meet across its one-pixel gaps; the menu bar, its menus' rows, the tool
   heads and the name are a finger tall; the status bar keeps its height and
   lends its buttons a larger reach than they show, and so does the folded
   corner, inward from its edge. */
@media (pointer: coarse) {
  /* The building's reach (styles.css): the icon buttons lend their
     ::before, since a plan's mark takes the signature tool's ::after. */
  :where(.shelf__more, .ed-back, .ed-picker, .ed-download, .ed-zoomval, .ed-notice__more, .ed-iconbtn) { position: relative; }
  :where(.shelf__more, .ed-back, .ed-picker, .ed-download, .ed-zoomval, .ed-notice__more)::after,
  :where(.ed-iconbtn)::before { content: ""; position: absolute; inset: var(--hit-reach); }
  .ed-iconbtn { min-width: var(--hit); height: 40px; }
  .ed-toolbar .ed-picker, .ed-toolbar .pill { min-height: 40px; }
  .ed-menubar__item { min-height: var(--hit); min-width: var(--hit); }
  /* A finger wide too, and a step further from the folded corner, so the
     two reaches never meet. */
  .ed-download { height: 40px; min-width: var(--hit); margin-right: 4px; }
  .ed-menu__item, .ed-menu--narrow .ed-menu__item, .ed-panel__tab { min-height: var(--hit); }
  [data-face^="docs-"] .tool__head, [data-face^="docs-"] .shelf__all { min-height: var(--hit); }
  [data-face^="docs-"] .field__input, [data-face^="docs-"] .shelf__find { min-height: var(--hit); }
  .ed-name { min-height: var(--hit); min-width: var(--hit); }
  button.ed-status__item { position: relative; min-width: var(--hit); }
  /* The bar sits on the island's lower edge, so the reach rises from it. */
  button.ed-status__item::after { content: ""; position: absolute; inset: auto min(0px, calc(50% - var(--hit) / 2)) 0; height: max(100%, var(--hit)); }
  /* While a notice stands over the bar, the buttons under it reach nowhere. */
  .ed-status:has(> .ed-notice:not([hidden])) button.ed-status__item::after { content: none; }
  /* A notice's own button sits on the same edge, and reaches up the same way. */
  .ed-notice__more::after { inset: auto var(--hit-reach) 0; height: max(100%, var(--hit)); }
  /* The island's rounded corner trims the outer tip of the fold's reach, so
     it reaches a little further inward to keep a finger's 44 px whole. */
  .ed-fold::before { content: ""; position: absolute; top: 0; right: 0; width: calc(var(--hit) + 4px); height: calc(var(--hit) + 12px); }
}

/* --- a phone or a tablet: the work gets the screen -------------------------------------------
   While a document is open on a narrow screen, the site's own bar (the mark,
   the account, the dial) folds away up out of the window -- everything in it
   is one Back away -- and the island comes up to within a few pixels of the
   top. Folded by its measured height (`--docs-topbar-h`, docs/room.js), so
   it slides rather than vanishes; on the way back it unfolds the same way. */
@media (max-width: 900px) {
  html[data-room="docs"] .topbar {
    transition: margin-top var(--dur-morph) var(--ease-soft), opacity var(--dur-morph) var(--ease-soft), visibility 0s linear 0s;
  }
  html[data-room="docs"] body:has(.face.is-active[data-editor]) .topbar {
    margin-top: calc(var(--docs-topbar-h, 0px) * -1);
    opacity: 0;
    visibility: hidden;
    transition: margin-top var(--dur-morph) var(--ease-soft), opacity var(--dur-morph) var(--ease-soft), visibility 0s linear var(--dur-morph);
  }
  html[data-room="docs"] body:has(.face.is-active[data-editor]) main { padding-top: var(--s2); }
  /* A reload coming back to a document (js/early.js): the bar is not shown
     only to fold away a moment later; it is folded from the first frame. */
  html[data-reopening] .topbar { display: none; }
  html[data-topbar-instant] .topbar { transition: none !important; }
}
@media (max-width: 560px) {
  html[data-room="docs"] body:has(.face.is-active[data-editor]) main { padding: var(--s2) var(--s2) var(--s2); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html[data-room="docs"] .topbar,
  html[data-room="docs"] body:has(.face.is-active[data-editor]) .topbar { transition: none; }
}
@media print {
  .ed-bar, .ed-toolbar, .ed-status, .ed-panel, .ed-fold { display: none !important; }
}

/* One home for every action: the marking tools, their colour and what to do
   with the chosen mark are on the toolbar, so the panel keeps only what has
   no place there (a note's words, a stamp's label, flattening). */
#face-docs-pdf .pdf-toolpanel #pdf-tools,
#face-docs-pdf .pdf-toolpanel #pdf-colours,
#face-docs-pdf .pdf-toolpanel #pdf-mark-opts,
#face-docs-pdf .pdf-toolpanel .tray__set:has(> [data-pick="redact"]) { display: none !important; }

/* --- words edited in place ------------------------------------------------------- */

#face-docs-pdf .tx-layer { position: absolute; inset: 0; pointer-events: none; }
#face-docs-pdf .tx-para {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 3px;
  cursor: text;
  pointer-events: auto;
  transition: border-color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
#face-docs-pdf .leaf__over[data-tool="edit"] .tx-para { border-color: var(--paper-signal-line); }
#face-docs-pdf .leaf__over:not([data-tool="edit"]) .tx-para { display: none; }
#face-docs-pdf .leaf__over:not([data-tool="edit"]) .tx-pic { display: none; }
/* Annotations that came with the file: outlined on hover, taken over when pressed. */
#face-docs-pdf .an-layer { position: absolute; inset: 0; pointer-events: none; }
#face-docs-pdf .an-from {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 2px;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
#face-docs-pdf .an-from:hover, #face-docs-pdf .an-from:focus-visible { border-color: var(--signal); background: var(--paper-signal-wash); outline: none; }
#face-docs-pdf .leaf__over:not([data-tool="select"]) .an-from { display: none; }
#face-docs-pdf .tx-pic {
  position: absolute;
  border: 1px dashed var(--paper-signal-line);
  border-radius: 2px;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  transition: border-color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
#face-docs-pdf .tx-pic:hover { border-color: var(--signal); background: var(--paper-signal-wash); }
#face-docs-pdf .tx-pic:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
#face-docs-pdf .tx-pic.is-chosen { border: 1px solid var(--signal); background: transparent; box-shadow: 0 0 0 1px var(--signal); z-index: 2; }
#face-docs-pdf .tx-pic.is-dragging { box-shadow: 0 10px 28px rgb(0 0 0 / 0.22), 0 0 0 1px var(--signal); }
#face-docs-pdf .tx-pic__ghost { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#face-docs-pdf .tx-pic__was { position: absolute; border: 1px dashed var(--signal); border-radius: 2px; pointer-events: none; opacity: 0.7; }
/* A corner to resize from: a small square to see, a larger one to hit. */
#face-docs-pdf .tx-pic__h { position: absolute; width: 24px; height: 24px; margin: -12px; }
#face-docs-pdf .tx-pic__h::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--paper);
  border: 2px solid var(--signal);
  border-radius: 2px;
}
#face-docs-pdf .tx-pic__h[data-corner="nw"] { left: 0; top: 0; cursor: nwse-resize; }
#face-docs-pdf .tx-pic__h[data-corner="ne"] { right: 0; top: 0; cursor: nesw-resize; }
#face-docs-pdf .tx-pic__h[data-corner="sw"] { left: 0; bottom: 0; cursor: nesw-resize; }
#face-docs-pdf .tx-pic__h[data-corner="se"] { right: 0; bottom: 0; cursor: nwse-resize; }
#face-docs-pdf .tx-para:hover, #face-docs-pdf .tx-para:focus-visible { background: var(--paper-signal-wash); border-color: var(--signal); outline: none; }
#face-docs-pdf .tx-edit, #face-docs-pdf .tx-done {
  position: absolute;
  margin: -2px 0 0 -2px;
  padding: 2px;
  color: var(--paper-ink);
  background: var(--paper);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-kerning: none;
}
#face-docs-pdf .tx-edit { pointer-events: auto; outline: 2px solid var(--signal); box-shadow: 0 6px 18px rgb(0 0 0 / 0.16); z-index: 3; }
#face-docs-pdf .tx-done { pointer-events: none; box-shadow: 0 0 0 1px var(--paper-signal-line); }
#face-docs-pdf .leaf__over[data-tool="edit"] .tx-done { pointer-events: auto; cursor: text; }
#face-docs-pdf .leaf__over[data-tool="edit"] .marks, #face-docs-pdf .leaf__over[data-tool="edit"] .readlayer { pointer-events: none; }

/* --- the PDF inside the editing shell --------------------------------------------- */

#face-docs-pdf .pdf-work { min-width: 0; }
#face-docs-pdf .pdf-status { position: sticky; top: 0; z-index: 3; }
#face-docs-pdf .pdf-status .docs-progress { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); background: var(--film-shell-solid); border-radius: 10px; box-shadow: 0 0 0 1px var(--film-rule); }
#face-docs-pdf .ed .desk { max-height: none; overflow: visible; padding: 0; }
#face-docs-pdf .ed .leaf__bar { display: none; }
#face-docs-pdf .pdf-toolpanel { padding-top: 0; gap: 0; }
#face-docs-pdf .pdf-toolpanel .bench__tools { max-height: none; overflow: visible; padding: 0; }
/* What the toolbar and the menus already do is not repeated in the panel. */
#face-docs-pdf .pdf-toolpanel .tool--fold[data-tool="pages"],
#face-docs-pdf .pdf-toolpanel .tool--fold[data-tool="save"] { display: none; }
#face-docs-pdf .pdf-toolpanel .tool--fold[data-tool="markup"] { border-top: 0; }

/* ==========================================================================
   A phone: one column, the page as the only scroll.
   ========================================================================== */

@media (max-width: 860px) {
  [data-face^="docs-"] .bench { grid-template-columns: 1fr; }
  [data-face^="docs-"] .bench__tools { max-height: none; overflow: visible; padding-right: 0; }
  #face-docs-pdf .desk { max-height: none; overflow: visible; padding-right: var(--s1); }
  /* Under the editor on a phone the tools sit on the face itself, which has
     no inset of its own: given the page's 16px, or they ran into both edges. */
  #face-docs-pdf > .bench__tools { padding: 0 var(--s4) var(--s4); }
  #face-docs-pdf .sheets { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s4) var(--s3); }
}
@media (hover: none) {
  [data-face^="docs-"] .pill { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .face[data-face^="docs-"].is-rising { animation: none; }
  #face-docs-pdf .sheet[data-turning] .sheet__canvas,
  #face-docs-pdf .sheet[data-closing] .sheet__paper,
  #face-docs-pdf .sheet[data-arriving] .sheet__paper,
  #face-docs-pdf .sheets__drop { animation: none; }
  #face-docs-pdf .sheet__paper,
  .face[data-face="docs-new"] .kind__paper { transition: none; }
  .face[data-face="docs-new"] .kind__pick:hover:not(:disabled) .kind__paper { transform: none; }
  [data-face^="docs-"] .docs-progress__fill[data-unknown] { animation: none; width: 100%; opacity: 0.4; }
}