/* MultiSig signing pages. Phone first; light and dark follow the system. */
/* The typed signature's preview is set in the fonts the saved picture is made with (see /fonts in api.py) */
@font-face { font-family: "MultiSig Noto Sans"; src: url(/fonts/NotoSans-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "MultiSig Noto Sans Myanmar"; src: url(/fonts/NotoSansMyanmar-Regular.ttf) format("truetype"); font-display: swap; }
/* The same fonts for the signer's boxes, with the printed line as their height (batch 13: the server sets their ascent
   and descent to it). A browser draws the text cursor as tall as those, so it fills the line the words print on and
   stays inside the box; the glyphs and widths are the same, so the words are drawn exactly as before. */
@font-face { font-family: "MultiSig Noto Sans Line"; src: url(/fonts/line/NotoSans-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "MultiSig Noto Sans Myanmar Line"; src: url(/fonts/line/NotoSansMyanmar-Regular.ttf) format("truetype"); font-display: swap; }
:root {
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --border: #bcc6d4;
  --text: #1f2937;
  --muted: #56637a;
  --primary: #2456a4;
  --on-primary: #ffffff;
  --link: #2456a4;
  --ink: #111827;
  --ok: #2e9a4e;
  --warn: #e0a21b;
  --slate: #64748b;
  --note-bg: #fff4d6;
  --note-text: #5a4300;
  --shadow: 0 1px 6px rgba(30, 45, 75, 0.18);
  --check-a: #ffffff; /* the squares behind a cleaned signature: light enough in both themes for its black ink to show */
  --check-b: #dde3ec;
  --muted-strong: #475569; /* muted words on the grey background (an unselected tab): 6.9:1 */
  --mark-warn-bg: #fff4d6;
  --mark-warn-text: #5a4300;
  /* One spacing rule on every page (22 Oct): a group of buttons stands clear of the content before it
     (inputs, words, lists, previews, the document) by --space-actions, and the buttons in a group are
     --space-buttons apart */
  --space-actions: 24px;
  --space-buttons: 12px;
  /* The page's smaller buttons (Recent PDFs: Open, Email again, Download); the header's tabs share their corners */
  --btn-small-height: 36px;
  --btn-small-pad: 14px;
  --btn-small-font: 14px;
  --btn-small-radius: 6px;
  /* The header's tabs (11 Nov, the owner: "tabs up to 44px"): the height, padding and font size of Make a PDF's
     Download and Email it to me (.btn, with .mp-bar-in > .btn's 44 px height), so they are no smaller than the
     buttons under them; the corners stay --btn-small-radius */
  --tab-height: 44px;
  --tab-pad: 16px;
  --tab-font: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #111827;
    --surface-2: #1f2937;
    --border: #374151;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --primary: #3d6fbf; /* white button text on it reaches 4.5:1 */
    --link: #93b4e6;
    --ink: #f3f4f6;
    --note-bg: #3b2f0b;
    --note-text: #fde68a;
    --shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    --check-a: #cbd5e1;
    --check-b: #94a3b8;
    --muted-strong: var(--muted);
    --mark-warn-bg: var(--warn);
    --mark-warn-text: #3b2f0b;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* A field the browser scrolls to (the keyboard opening, a link to a part of the page) stops below the
   header that stays at the top, never under it: room for its tallest form, two rows on a phone */
html { scroll-padding-top: calc(112px + env(safe-area-inset-top)); }
/* A page with the tabs keeps room for a scrollbar whether it scrolls or not, so a long page (My documents) is
   no narrower than a short one (Create) and the header does not move between them (10 Nov) */
html.with-tabs { scrollbar-gutter: stable; }
body {
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--surface-2);
}
body.signing {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[hidden] { display: none !important; }

/* Header bar. It stays at the top while the page scrolls, on every page (23 Oct): the content
   scrolls under it, past the thin line under it. Above the document's boxes (z-index 1-3). On the
   signing pages the body does not scroll (the document does, under it), so there it simply stays. */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px; /* room above and below the logo, so it never touches the line under the header */
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* The MultiSig mark (the agreed design, 22 Oct): a full square with its corners rounded (baked into the
   picture), with no card, border or shadow, the same in light and dark */
.logo { flex: none; display: block; width: 40px; height: 40px; }
.titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-title {
  min-width: 0;
  font-weight: 600;
  display: -webkit-box; /* at most two lines, then an ellipsis */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .doc-title { font-size: 15px; line-height: 1.3; }
}

/* The signing page's bar (batch 12): one row, 52 px tall, full width, on every device; there is no page bar, side
   panel or bottom dock. As topbar.png: on the left the icon, the title, then "sent by …" in grey; a flexible gap; then,
   grouped tightly on the right (16 px apart), "‹ Page 1 of 2 ›", the progress chip, "Now: …" and Finish (batch 13:
   the way back to the sender's place is a round button in the moved box's own row, not here). As the window narrows,
   "sent by" goes first (sign.js: fitTitle), then the title shortens with an ellipsis.
   A phone leaves out "sent by", the page's words and "Now: …", and has the Zoom button. Nothing in
   it appears, disappears or changes size while signing (sign.js: steady sizes "Now: …" and Finish to their longest
   words for this document), so nothing moves under the mouse or finger. */
body.signing .bar {
  flex: none;
  flex-wrap: nowrap;
  height: calc(52px + env(safe-area-inset-top));
  min-height: 0;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  gap: 4px;
}
body.signing .logo { width: 24px; height: 24px; }
/* The title, one line, shortening last (an ellipsis); "sent by" beside it keeps its size until it goes */
body.signing .titles { flex: 1 1 0; flex-direction: row; align-items: baseline; gap: 8px; overflow: hidden; }
body.signing .doc-title {
  display: block;
  flex: 0 1 auto;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: none;
  line-clamp: none;
}
.sent-by {
  display: none;
  flex: none;
  font-size: 14px;
  color: var(--muted-strong);
  white-space: nowrap;
}
.bar-tools { display: flex; flex: none; align-items: center; gap: 4px; }
.pages { display: flex; align-items: center; gap: 12px; } /* a phone: the arrows' 44 px touch areas meet */
.page-label { font-size: 14px; text-align: center; white-space: nowrap; color: var(--muted-strong); }
@media not all and (min-width: 632px) and (orientation: landscape) {
  .chip { order: -1; } /* a phone: the chip, then the arrows */
  .pages .page-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* The progress chip: "0 of 3 done", or "0/3" on a phone */
.chip {
  flex: none;
  padding: 3px 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
/* "Now: <field name>", or "All done": a laptop only. A link to the field, as its pin (sign.js: goNext): underlined
   under the mouse. Its room is as wide as the longest words it can show for this document (sign.js: steady), so the
   words can change; capped, and a name longer than that ends in an ellipsis. */
.now {
  display: none;
  flex: none;
  max-width: 280px;
  height: 44px;
  padding: 0 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--link);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .now:hover { text-decoration: underline; } }
.now.idle { color: var(--text); text-decoration: none; cursor: default; }
.now:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
/* Finish: as wide as its longest words and its padding (sign.js: steady), so it keeps one width; 44 px tall, to touch,
   as the Zoom button */
.btn.finish { flex: none; min-height: 44px; height: 44px; padding: 0 10px; font-size: 15px; white-space: nowrap; }
@media (min-width: 632px) and (orientation: landscape) {
  body.signing .bar { padding: 0 16px; gap: 12px; }
  .chip { padding: 3px 10px; }
  body.signing .logo { width: 40px; height: 40px; }
  body.signing .doc-title { font-size: 16px; }
  .sent-by { display: block; }
  .sent-by.gone { display: none; } /* no room: it goes before the title shortens */
  .bar-tools { gap: 16px; }
  .pages { gap: 4px; }
  .now { display: block; }
  .btn.finish { padding: 0 16px; }
}
/* A narrow laptop window: "Now: …" gets less room, then the page's words go, so the bar keeps to one row */
@media (min-width: 632px) and (max-width: 1099px) and (orientation: landscape) {
  .bar-tools { gap: 12px; }
  .now { max-width: 180px; }
}
@media (min-width: 632px) and (max-width: 899px) and (orientation: landscape) {
  .pages { gap: 12px; }
  .pages .page-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .chip { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
  .now { max-width: 110px; }
}

/* A small phone: the title keeps room for its first words */
@media (max-width: 400px) {
  body.signing .doc-title { font-size: 14px; }
  .btn.finish { padding: 0 8px; font-size: 14px; }
  .chip { padding: 3px 5px; }
}

/* Document viewer */
.app { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* The page buttons in the bar (batch 25: ▲ ▼, a page up or down the scroll): 32 px wide (44 px to touch), with
   DocSigner's tool-button look (radius 6, a light grey on hover, darker pressed) */
.page-step {
  position: relative;
  flex: none;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent center / 20px 20px no-repeat;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page-step::before { /* the triangle, in the text's colour */
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 12px 6px;
  background: currentColor;
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
}
.page-step.prev { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.5L16 14.5H4z' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.page-step.next { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 15.5L16 5.5H4z' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (hover: hover) { .page-step:hover:not(:disabled) { background-color: rgba(127, 127, 127, 0.14); } }
.page-step:active:not(:disabled) { background-color: rgba(127, 127, 127, 0.26); }
.page-step::after { content: ""; position: absolute; inset: 0 -6px; } /* 44 px to touch */
.page-step:disabled { opacity: 0.35; cursor: default; }
.page-step:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
/* Batch 26: the pins' strip is room on the left inside the scroll (sign.js sets --strip), so the pins in it can scroll
   with the page; --pad is the room round the page */
.viewer {
  --pad: 8px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--pad);
  padding-left: calc(var(--pad) + var(--strip, 0px));
  -webkit-overflow-scrolling: touch;
}
.sheet {
  /* Batch 25: the sheet is every page of the document, one under the other (sign.js), in one long scroll */
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  /* The page stays white in dark mode too, so the boxes keep one set of colours, and their words stay dark.
     Every box is see-through (23 Oct): the printed line under it shows. The house palette: */
  --fb-green: #2e9a4e;
  --fb-blue: #2456a4;
  --fb-red: #d0453e;
  --fb-wait: #94a3b8; /* a field still to fill in */
  --fb-amber: #e0a21b; /* DocSigner's AMBER: needs a look */
  --fb-ink: #1f2937;
}
.sheet img { display: block; width: 100%; height: 100%; }
/* One page: as wide as the sheet, as tall as its own shape (sign.js sets aspect-ratio), its boxes on it */
.doc-page {
  position: relative;
  background: #ffffff;
  box-shadow: var(--shadow);
  overflow: clip; /* a box moved near the page's edge never makes the page scroll sideways */
  /* The corner handle moves in from the page's right and bottom edges (sign.js sets --room-r and --room-b on each
     box), so nothing of it is cut off: Safari ignores overflow-clip-margin (batch 26: the tick and cross stay on their
     box's right edge) */
}
/* Between two pages: a gap saying "Page 2 of 3" (batch 25), 26 px at the whole page width; it grows with the zoom
   (sign.js sets --z), as the pages do, so a pinch keeps the page under the fingers */
.page-gap {
  height: calc(26px * var(--z, 1));
  overflow: hidden;
  font-size: 13px;
  line-height: calc(26px * var(--z, 1));
  text-align: center;
  white-space: nowrap;
  color: var(--muted-strong);
  -webkit-user-select: none;
  user-select: none;
}
/* Zoomed in on a phone (batch 11: a pinch, or the Zoom button): sign.js sets the width, a multiple of the whole page
   width, and the page scrolls both ways in the document's window */
.sheet.zoomed { max-width: none; }
/* On a phone two fingers on the document zoom it (sign.js), not the browser's own pinch, which would enlarge the
   whole web page; one finger still scrolls. Never on a laptop. */
@media not all and (min-width: 632px) and (orientation: landscape) {
  .viewer { touch-action: pan-x pan-y; }
}
@media (min-width: 632px) and (orientation: landscape) {
  /* A laptop (batch 12): the page is big, min(available width - 48 px, 1000 px) wide, and the signer scrolls down to
     read; it is not shrunk to fit the window's height */
  .viewer { --pad: 24px; }
  .sheet { max-width: 1000px; }
}

/* The signer's fields (spec of 23 Oct: signing page boxes). Every box is drawn exactly where it will print:
   sign.js sets its left, top, width and height. A box has no border of its own: sign.js draws DocSigner's dashed
   edge (.edge: 1.5 px, dashes fitted to each side) on its outline, in the colour of its state:
     waiting: mid grey, no tint, nothing inside;
     green:   the field being filled in now: green, a light green tint, the tick and cross, the corner handle;
     set:     no box at all, only what was entered;
     blue:    a set field tapped to change: as green, in blue.
   No labels, numbers or chips are drawn on the page: the panel under it says what the field is. */
.box {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
/* Other signers' boxes: hidden, and shown as faint grey outlines only while the signer drags or resizes a box
   (sign.js: #sheet.adjusting), so the signer can see what not to cover */
.box.other { --edge: var(--fb-wait); display: none; opacity: 0.6; pointer-events: none; }
#sheet.adjusting .box.other { display: block; }
.box.mine {
  --edge: var(--fb-wait);
  overflow: visible;
  color: var(--fb-ink);
  cursor: pointer;
  /* A finger on any box but the green or blue one scrolls the page */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.box.mine::before { /* at least 44 x 44 px to tap, however small the box, moved in from the page's edges
                       (sign.js: hitArea sets the px it reaches out from each side) */
  content: "";
  position: absolute;
  top: calc(-1 * var(--hit-t, 0px));
  right: calc(-1 * var(--hit-r, 0px));
  bottom: calc(-1 * var(--hit-b, 0px));
  left: calc(-1 * var(--hit-l, 0px));
}
.box.mine:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
/* The green or blue box can be dragged at once (no select step): it, and only it, takes the finger before any touch
   begins. Above the others, so its tick and cross stay on top of a box just above it. */
.box.mine.green, .box.mine.blue { z-index: 2; touch-action: none; cursor: grab; }
.box.mine.green { --edge: var(--fb-green); background: rgba(46, 154, 78, 0.07); }
.box.mine.blue { --edge: var(--fb-blue); background: rgba(36, 86, 164, 0.07); }
.box.mine.set { z-index: 1; }
.box.mine.dragging { cursor: grabbing; }
.box .edge {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--edge);
  stroke-width: 1.5px;
}
.box.mine.set .edge { display: none; }
/* A waiting field: a dotted outline round its tap zone (sign.js: paintEdge), not its box at its print size */
.box.mine.waiting .edge { stroke-linecap: round; }
/* Margin pins (batch 12; batch 24: rule D): one per field of the signer's, or one for a group of close fields, in a
   strip of their own left of the page, level with their field (sign.js: placePins). The layer lies over the document's
   window and lets presses through to the page, except on a pin. Each pin is a button (its touch area) holding a
   teardrop, a square with three round corners turned to point straight at its field, at any angle (batch 25: sign.js
   sets --ang), with the field's number in white, bold and upright (a tick badge too once set). Its fill is dark enough for that
   (batch 12 fixes, at least 4.5:1): slate while waiting, a deep green now or set, blue when changed. A pin moved up or
   down from its field has a thin dashed grey leader line to it (batch 27: round the boxes in its way); a group's pin
   has a thin solid bracket beside the fields it stands for. A pin shared by the fields above or below the view, at the strip's top or bottom, points
   straight up or down. A small badge says how many more fields a group's or a shared pin stands for (batch 23). */
.pins { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.pins .leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Batch 26 (no shaking while swiping): the rail holds the pins level with their fields (batch 27: and those stacked
   off their fields' level, with their lines; every pin but the shared ones), inside the scroll at the strip's place,
   so the browser's own scrolling moves them up and down with the page; across it stays put (sticky at the scroll's
   left edge, through the room round the page and the strip: sign.js sets --strip). Zoomed in, it covers
   the strip all the way down the page (.cover: --tall, the sheet's height), so the page scrolled sideways goes under
   the strip as it went under the document window's edge, never into it. Batch 27: nothing clips it (a clip made
   WebKit's scroll jump, or every frame of a zoom slow); a pin that would reach past the scroll's foot is placed in
   the pins' layer instead (sign.js, placePins), so no pin ever adds room below the last page (batch 25, 3). */
.pin-rail {
  position: sticky;
  left: calc(0px - var(--pad) - var(--strip, 0px));
  z-index: 4;
  width: 0;
  height: 0;
  margin-left: calc(0px - var(--pad) - var(--strip, 0px));
  pointer-events: none;
}
.pin-rail.cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--strip, 0px);
  height: var(--tall, 0px);
  background: var(--surface-2);
}
.pin-rail .leaders { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.leaders .leader { fill: none; stroke: #94a3b8; stroke-width: 1px; stroke-dasharray: 3 3; }
.leaders .leader.bracket { stroke-dasharray: none; }
.pin {
  --pin: #64748b; /* waiting: white on it 4.8:1 */
  /* Batch 20: with a mouse a 44 px teardrop (a 36 px square turned) answering clicks over 48 px, its number 17 px;
     under a finger 52 px (42 px), over 56 px, 20 px. sign.js (pinSizes) keeps them their size and 4 px apart, and
     places them by these. */
  --hit: 48px;
  --sq: 36px;
  --num: 17px;
  --badge: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--hit);
  height: var(--hit);
  margin: calc(var(--hit) / -2) 0 0 calc(var(--hit) / -2); /* sign.js sets left and top to its centre */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: inherit; /* WebKit gives a button its own font */
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pin[hidden] { display: none; }
.pin.green, .pin.set { --pin: #278443; } /* 4.7:1 */
.pin.blue { --pin: #2456a4; } /* 7.1:1 */
@media (pointer: coarse) {
  .pin { --hit: 56px; --sq: 42px; --num: 20px; --badge: 22px; }
}
.pin .drop {
  position: absolute;
  top: calc((var(--hit) - var(--sq)) / 2);
  left: calc((var(--hit) - var(--sq)) / 2);
  width: var(--sq);
  height: var(--sq);
  border-radius: 50% 4px 50% 50%;
  transform: rotate(calc(var(--ang, 0deg) + 45deg)); /* the square corner points at --ang (0: right, 90deg: down) */
  background: var(--pin);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.32);
  transition: filter 0.08s; /* batch 26: its turn is never animated, so it never wobbles as the page scrolls */
}
/* The field being filled in now, or changed: a light ring round its pin */
.pin.green .drop, .pin.blue .drop { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(15, 23, 42, 0.38); }
/* Pressed: it gives a little under the finger (batch 20) */
.pin:active .drop { filter: brightness(0.9); }
.pin .pin-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-size: var(--num);
  font-weight: 700;
  line-height: 1;
}
.pin .badge {
  display: none;
  position: absolute;
  z-index: 1;
  right: -6px;
  min-width: var(--badge);
  height: var(--badge);
  padding: 0 3px;
  font-size: calc(var(--badge) * 2 / 3);
  font-weight: 700;
  line-height: calc(var(--badge) - 3px);
  text-align: center;
  white-space: nowrap;
  color: var(--pin);
  background: #ffffff;
  border: 1.5px solid var(--pin);
  border-radius: calc(var(--badge) / 2);
}
.pin.up .badge:not(:empty), .pin.down .badge:not(:empty) { display: block; bottom: -2px; }
.pin.group .badge:not(:empty) { display: block; bottom: -2px; } /* a group pin's count (batch 24) */
/* A set field's pin keeps its number (batch 13: a tick in its place made every pin alike once all were set), with a
   small tick badge on its corner: white with a green rim and tick (4.7:1). Always at the top right, shared or not
   (batch 23); a shared pin's count of more fields is at the bottom right, so the two never meet. */
.pin .done { display: none; }
.pin.set .done {
  display: block;
  position: absolute;
  z-index: 1;
  top: -2px;
  right: -4px;
  width: var(--badge);
  height: var(--badge);
  box-sizing: border-box;
  border-radius: 50%;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.2l2.9 3 5.4-6.4' fill='none' stroke='%23278443' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  border: 1.5px solid var(--pin);
}
@media (hover: hover) { .pin:hover .drop { filter: brightness(1.12); } }
.pin:focus-visible { outline: 3px solid var(--primary); outline-offset: 0; }
/* A moved box over another box: amber (DocSigner's "needs a look") until it is moved to a clear space; Finish does
   not send it (sign.js covers()) */
.box.mine.overlap { --edge: var(--fb-amber); }
.box.mine.set.overlap .edge { display: block; }
/* Typed words and the date sit as they will print: at the box's top left, at their printed size, in the fonts the
   PDF prints in. sign.js sizes them, sets the line's height and puts the baseline where the PDF has it. Fitted as
   the PDF fits them, they never reach past the box. Drawn with no background, so the page shows through. */
.box.mine .tag {
  display: block;
  position: relative;
  white-space: nowrap;
  font-family: "MultiSig Noto Sans Line", "MultiSig Noto Sans Myanmar Line", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  pointer-events: none;
}
.tag .baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* The green or blue text box's words are typed straight into it (batch 10, sign.js): the box takes the taps, and the
   words take the cursor and the keyboard. At least a line tall, so the cursor shows before anything is typed. */
.box.mine .tag[contenteditable] {
  min-height: 1.2em;
  outline: none;
  caret-color: var(--fb-ink);
  user-select: text;
  -webkit-user-select: text;
}
/* Once they are being typed in, the words also take a tap or click where it lands (sign.js onWords): the cursor goes
   there, to fix one letter. Until then a tap anywhere in the box is the box's, and puts the cursor at the end. */
.box.mine .tag[contenteditable]:focus { pointer-events: auto; }
/* Batch 20: no cursor while the page is passing through a zoom or a pinch (sign.js: growing), nor before the boxes'
   own fonts are in (fit.js; sign.js sets body.fonts-in): it shows once, at its line's height, where it stays */
#sheet.growing .box.mine .tag[contenteditable], body:not(.fonts-in) .box.mine .tag[contenteditable] {
  caret-color: transparent;
}
/* Batch 20: an empty green or blue text box says what to type in it, in grey on the line where the words will start
   (sign.js fits it as the words and puts it where they go; the cursor stands at its start). Solid grey, 5.0:1 on the
   green tint and 4.8:1 on the blue (the page stays white in dark mode too); 55% of the ink would be 3.2:1. Never
   selected or tapped (the taps go to the box and the words), gone with the first letter, back if the box is emptied.
   A waiting box shows nothing inside. */
.box.mine .prompt {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-family: "MultiSig Noto Sans Line", "MultiSig Noto Sans Myanmar Line", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: #646b76;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.box.mine.empty.green .prompt, .box.mine.empty.blue .prompt { display: block; }
.box .sig {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* sign.js sets the inner margin as padding, as for words; object-fit keeps to inside it */
  object-fit: contain;
  pointer-events: none;
}
/* The corner handle of the green or blue box, as DocSigner's: a square in the edge's colour with a white rim,
   centred on the box's corner; bigger under a finger, and 44 px to touch either way. At the page's right or bottom
   edge it moves in (--room-r, --room-b: the px from the box to the edge), and so does its 44 px, all on the page. */
.box .grip { display: none; }
.box.mine.green .grip, .box.mine.blue .grip {
  --grip: 9px;
  display: block;
  position: absolute;
  right: calc(-1 * min(var(--grip) / 2, var(--room-r, 99px)));
  bottom: calc(-1 * min(var(--grip) / 2, var(--room-b, 99px)));
  z-index: 3;
  box-sizing: border-box;
  width: var(--grip);
  height: var(--grip);
  background: var(--edge);
  border: 1px solid #ffffff;
  cursor: nwse-resize;
}
@media (pointer: coarse) {
  .box.mine.green .grip, .box.mine.blue .grip { --grip: 13px; }
}
.box .grip::before { /* 44 x 44 px about the box's corner, kept on the page and off other fields' boxes (sign.js:
                        placeGrip sets where, from the handle's padding box) */
  content: "";
  position: absolute;
  left: var(--tap-l, 0px);
  top: var(--tap-t, 0px);
  width: var(--tap-w, 44px);
  height: var(--tap-h, 44px);
}
/* DocSigner's row of round buttons (batch 10): once the box is moved or resized, a grey ↺ that puts it back where the
   sender put it (batch 13; first, so the others never shift when it comes), then on a signature or a date a blue one
   (Change signature, Date format), then a green tick and a red cross, white icons with a white rim and a soft shadow.
   Batch 20 ("all of them should be easy to click, inviting"): under a finger 44 px circles with 24 px icons, each
   answering taps over 48 px of height; with a mouse 36 px, 20 px icons, 44 px. 8 px apart, each reaching to the
   middle of the gap on each side (so every one answers over 52 px across under a finger, 44 with a mouse). Pressed,
   a button sinks a little and darkens. They sit just above the box, at its top-right corner; at the very top of the
   page (sign.js: .top), just below it, clear of the corner handle. Batch 26: fixed to the box, the row's right edge on
   the box's right edge, above it or below it; a row wider than its box reaches left past the box's left edge (only at
   the page's left edge does sign.js move it right: --acts-in). */
.box .acts { display: none; }
.box.mine.green .acts, .box.mine.blue .acts {
  --d: 36px;
  --gap: 8px;
  --hit: 44px;
  --icon: 20px;
  display: flex;
  gap: var(--gap);
  position: absolute;
  right: calc(0px - var(--acts-in, 0px));
  bottom: calc(100% + 4px);
  z-index: 3;
}
@media (pointer: coarse) {
  .box.mine.green .acts, .box.mine.blue .acts { --d: 44px; --hit: 48px; --icon: 24px; }
}
.box.mine.top .acts {
  bottom: auto;
  top: calc(100% + 10px);
}
.acts button {
  position: relative;
  flex: none;
  width: var(--d);
  height: var(--d);
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28), 0 1px 2px rgba(15, 23, 42, 0.2);
  background-position: center;
  background-size: var(--icon) var(--icon);
  background-repeat: no-repeat;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.08s;
}
@media (hover: hover) {
  .acts button:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(15, 23, 42, 0.32), 0 1px 2px rgba(15, 23, 42, 0.2); }
}
.acts button:active { transform: scale(0.9); filter: brightness(0.86); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3); }
.acts button::before { /* the area that answers taps, measured from inside the 2 px rim: --hit high, all of the extra
                          on the side away from the box (above the row, or below it when it is under the box), so the
                          box keeps every tap meant for it; across to the middle of the gap on each side */
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--d) - var(--hit) - 2px);
  bottom: -2px;
  left: calc(-2px - var(--gap) / 2);
  right: calc(-2px - var(--gap) / 2);
}
/* The blue button: a pen on a signature (Change signature), a calendar on a date (Date format) */
.acts .change { background-color: var(--fb-blue); }
.box[data-kind="signature"] .acts .change {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19l1.1-4.3 9.6-9.6 3.2 3.2-9.6 9.6zM13.9 6.9l3.2 3.2' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.box[data-kind="date"] .acts .change {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='6' width='15' height='13.5' rx='2' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M4.5 10.5h15M8.5 4v4M15.5 4v4' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ↺: back to the sender's place, slate as a waiting pin (white on it 4.8:1) */
.acts .reset {
  background-color: #64748b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 5v5h5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.6 15a7.2 7.2 0 1 0 1.7-7.5L4.5 10' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.acts .tick {
  background-color: var(--fb-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 12.6l4.4 4.6L18.8 7' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.acts .cross {
  background-color: var(--fb-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 6.6l10.8 10.8M6.6 17.4l10.8-10.8' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.box.mine.top .acts button::before { top: -2px; bottom: calc(var(--d) - var(--hit) - 2px); }
.acts button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Change signature's choice (batch 10): a card over the page, just under the bar and inside its margins, so nothing
   on the page changes size. The saved signature first (when there is one), then Draw, Type and Upload. */
.sig-menu, .message {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 16px;
  right: 16px;
  max-width: 600px;
  margin: 0 auto;
}
.sig-menu {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(30, 45, 75, 0.18);
}
/* The saved signature, as it goes in the box: a tap puts it in */
.sig-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 76px;
  margin-bottom: var(--space-buttons);
  padding: 6px 12px;
  font: inherit;
  font-size: 14px;
  color: #475569; /* on the white below, in either theme */
  background: #ffffff; /* the signature's ink is dark: white in either theme, as the page */
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.sig-choice img { min-height: 0; max-width: 100%; flex: 1; object-fit: contain; }
.sig-choice:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.sig-ways { display: flex; gap: var(--space-buttons); }
.sig-menu .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 15px; }
/* A message floats over the page just under the bar, as Change signature's choice does: showing it changes no size
   (batch 10: the page never moves by itself) */
.message {
  padding: 10px 12px;
  background: var(--note-bg);
  color: var(--note-text);
  border: 1px solid var(--warn);
  border-radius: 6px;
}
/* Batch 25: nothing above the first page or below the last for a pin, ever (they stack in their strip). Only on a
   phone while the keyboard is open (sign.js: .keyboard) is there 70vh more below it, under the keyboard, so a box
   moves into the middle between the bar and the keyboard (batch 15). The browser never moves the page by itself when
   that changes (overflow-anchor): sign.js keeps it still. */
.viewer { overflow-anchor: none; }
/* Room above the first page only while the keyboard is open, if the box being typed in needs it (sign.js: keyRoom) */
.viewer::before { content: ""; display: block; height: var(--key-room, 0px); }
.viewer::after { content: ""; display: block; height: 0; }
body.keyboard .viewer::after { height: 70vh; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The Zoom button (batch 11), in the bar left of Finish, on a phone only: a magnifier with a plus, or a minus
   once zoomed in, in the text's colour; 44 x 44 px, so the bar keeps its height */
.zoom-btn {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15 15l5.5 5.5M7 10h6M10 7v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zoom-btn.out {
  --glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15 15l5.5 5.5M7 10h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.zoom-btn::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--glass) center / contain no-repeat;
  mask: var(--glass) center / contain no-repeat;
}
.zoom-btn:active { background: var(--surface-2); }
.zoom-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (min-width: 632px) and (orientation: landscape) {
  .zoom-btn { display: none; }
}
.btn {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.wide { flex: 2; }
/* Buttons that sit together are one size: each takes an equal share of the row */
.btn-row { display: flex; gap: var(--space-buttons); }
.btn-row > .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Thank-you, already-signed, expired and observer pages */
.notice { flex: 1; padding: 32px 16px; overflow: auto; }
.card {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.card h1 { margin: 12px 0 8px; font-size: 22px; }
.card p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.card .btn { margin-top: var(--space-actions); }
.card .btn-row { margin-top: var(--space-actions); }
.card .btn-row > .btn { margin-top: 0; }
.mark {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; color: #ffffff; font-size: 28px; font-weight: 700;
}
.mark.ok { background: var(--ok); }
.mark.warn { color: var(--mark-warn-text); background: var(--mark-warn-bg); border: 2px solid var(--warn); }
.mark.info { background: var(--primary); }

/* The tracker (list of shame) inside a notice card */
.card.wide { max-width: 640px; }
.tracker { margin-top: 24px; text-align: left; }
.card .tracker-sentence { color: var(--text); }
.card .tracker-note {
  margin-top: 12px;
  padding: 8px 12px;
  color: var(--note-text);
  background: var(--note-bg);
  border: 1px solid var(--warn);
  border-radius: 6px;
}
.tracker-table { width: 100%; margin-top: 16px; border-collapse: collapse; }
.tracker-table th {
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.tracker-table td { padding: 10px 8px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.tracker-table tbody tr:last-child td { border-bottom: 0; }
.t-name { font-weight: 600; overflow-wrap: anywhere; }
.t-role, .t-when { font-size: 14px; color: var(--muted); }
/* Status in words, with its colour as a tint and a dot: never colour alone */
.pill {
  --pill: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--pill);
  border-radius: 12px;
}
.pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pill); }
.pill.signed { --pill: var(--ok); background: rgba(46, 154, 78, 0.14); }
.pill.waiting { --pill: var(--warn); background: rgba(224, 162, 27, 0.18); }
.pill.cancelled { --pill: var(--slate); background: rgba(100, 116, 139, 0.16); }
.pill.observer { --pill: var(--border); }
.pill.copy_sent { --pill: var(--ok); }
/* Who sent it, under the sentence; then the list's own heading, so its rows are not taken for documents */
.card .tracker-sender { margin-top: 4px; font-size: 14px; color: var(--muted-strong); }
.tracker-heading { margin: 24px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.tracker .tracker-heading + .tracker-table { margin-top: 8px; }
/* Narrow screens: one block per person (name and status, then role, then when) */
@media (max-width: 560px) {
  .card.wide { padding: 24px 16px; }
  .tracker-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tracker-table, .tracker-table tbody { display: block; }
  .tracker-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .tracker-table tbody tr:last-child { border-bottom: 0; }
  .tracker-table td { display: block; padding: 0; border: 0; }
  .t-name { grid-column: 1; grid-row: 1; }
  .t-status { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .t-role { grid-column: 1; grid-row: 2; }
  .t-when { grid-column: 1; grid-row: 3; }
  .t-when:empty { display: none; }
}
.tracker .btn.tracker-action { display: flex; width: 100%; margin-top: var(--space-actions); }
.tracker .btn-row.tracker-action { margin-top: var(--space-actions); }
.tracker .tracker-action + .tracker-heading { margin-top: var(--space-actions); }
/* A second, quieter link under a card's first one (all my documents): as wide as the buttons above it,
   so the buttons that sit together are one size */
.card a.btn.more { display: flex; width: 100%; margin: var(--space-actions) 0 0; }
.card .btn + a.btn.more, .card .btn-row + a.btn.more { margin-top: var(--space-buttons); }
/* Phones: every button in a card is the card's full width, as on the sign-in page */
@media (max-width: 560px) {
  .card .btn, .card a.btn.more { width: 100%; }
}

/* My documents: one card per document, all of it one link: the title, the person's part, the state and
   progress, then when it was sent; a chevron says it opens */
.card.my h1 + p { margin-top: 16px; }
.my-list { margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
.my-list li + li { margin-top: 12px; }
.my-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 44px 16px 16px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.my-card::after { /* the chevron */
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border: solid var(--muted);
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.my-card.waiting { border-left: 4px solid var(--warn); padding-left: 13px; }
.my-card:hover { border-color: var(--primary); }
.my-card.waiting:hover { border-left-color: var(--warn); }
.my-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.my-title {
  font-size: 17px;
  line-height: 1.3;
  display: -webkit-box; /* at most three lines */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-weight: 600;
  color: var(--link);
  overflow-wrap: anywhere;
}
.my-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 2px; }
.my-progress, .my-when { font-size: 14px; color: var(--muted); }
.my-part { font-size: 15px; color: var(--text); }
.my-card.waiting .my-part { font-weight: 600; color: var(--note-text); }
.pill.state-sent { --pill: var(--warn); background: rgba(224, 162, 27, 0.18); }
.pill.state-completed { --pill: var(--ok); background: rgba(46, 154, 78, 0.14); }
.pill.state-cancelled, .pill.state-expired { --pill: var(--slate); background: rgba(100, 116, 139, 0.16); }
/* The foot of My documents: who is signed in (the header says so on wider screens), and signing out on
   every device */
.account-foot { margin-top: var(--space-actions); }
.account-foot .account-name { display: none; margin: 0 0 8px; font-size: 14px; color: var(--muted-strong); }
.account-foot .btn { margin-top: 0; }
/* A button at its own size (not the card's width), for a quiet action such as signing out everywhere */
.card .btn.compact { flex: none; width: auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
.my-signout { margin: 0; }
/* The My signature tab: the saved signature, to see what is used, and the way to change it */
/* One centred column under the heading (10 Nov, the tester): the "changed" banner, the signature, its note
   and the button, an even --sig-gap apart (and as far from the heading), with the banner or without it. The
   column is the signature's width, so the banner and the note keep a comfortable line length under it. */
.my-signature {
  --sig-gap: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--sig-gap);
  max-width: 360px;
  margin: var(--sig-gap) auto 0;
  text-align: center;
}
.card.my h1:has(+ .my-signature) { margin-bottom: 0; }
.card.my .my-signature > * { margin: 0; }
.my-signature h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.my-signature .pad-frame { width: 100%; }
.card.my .my-signature p { font-size: 14px; line-height: 1.5; }
.card.my .my-signature .btn { margin-top: 0; }
@media (max-width: 560px) {
  .my-signature { --sig-gap: 16px; }
}
/* Phones: the documents' cards are not in a card of their own, so they get the screen's width */
@media (max-width: 560px) {
  .notice:has(> .card.my), .notice:has(> .card.admin) { padding: 16px; }
  .card.wide.my, .card.wide.admin {
    padding: 4px 0 0;
    text-align: left;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .card.my h1, .card.admin h1 { margin: 8px 0 0; }
  .card.my p { color: var(--muted-strong); }
}
@media (max-width: 800px) { /* as the header leaves the name out: below */
  .account-foot .account-name { display: block; }
}
/* One document: the way back, its title, the tracker, then what can be done with it */
.my-document { text-align: left; }
.my-document h1 { overflow-wrap: anywhere; }
.my-document > a.btn.primary { display: flex; width: 100%; }
.back-nav { max-width: 640px; margin: -16px auto 8px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--link); }
.back-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* The admin page: every document, then everyone who has signed in. On a phone a link under the heading
   jumps to the people, and each person's details are one muted line under their address. */
.card.admin { max-width: 960px; text-align: left; }
.card .jump { display: none; margin: 4px 0 0; }
.card .jump a + a { margin-left: 24px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--link); }
.jump a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.a-line { display: none; }
.admin h2 { margin: 32px 0 0; font-size: 18px; }
/* The two tables of people: signed in now, and not */
.admin h3.a-people-group { margin: 20px 0 0; font-size: 16px; font-weight: 600; }
.admin .note { margin-top: 16px; }
.admin-table { width: 100%; margin-top: 16px; border-collapse: collapse; }
.admin-table th {
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 10px 8px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.a-main { font-weight: 600; overflow-wrap: anywhere; }
.a-main a { color: var(--link); }
.a-main a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* An address breaks only where address_breaks put a <wbr> (after "@" and dots), never mid-word */
.a-email, .a-address { font-size: 14px; overflow-wrap: normal; word-break: normal; }
.a-small { font-size: 14px; color: var(--muted); }
/* The small columns (state, dates, counts, buttons) take only the width their words need, on one line */
.admin-table .a-narrow { width: 1%; white-space: nowrap; }
.a-count { text-align: center; }
/* A person: the name, bold, with the address under it in muted words */
.a-person { min-width: 12em; }
.a-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.a-address { display: block; margin-top: 2px; color: var(--muted-strong); }
/* Sign-in activity: a failed attempt is marked in words and in amber, its row with an amber edge */
.admin p.a-lead { margin-top: 8px; color: var(--muted-strong); }
.admin-activity tr.failed td:first-child { box-shadow: inset 4px 0 0 var(--warn); padding-left: 12px; }
.pill.event-failed { --pill: var(--warn); background: rgba(224, 162, 27, 0.18); }
.a-what { font-size: 14px; white-space: nowrap; }
.a-device { font-size: 14px; }
.a-action { text-align: right; }
.a-action form { margin: 0; }
/* A row's buttons sit side by side in two fixed slots, so they are all one size, the row stays one line high
   and Sign out is in the same place on every row (a row without a saved signature leaves the second slot
   empty) */
.a-buttons { display: inline-grid; grid-template-columns: repeat(2, 9.5em); gap: var(--space-buttons); }
/* A document's title link is at least 44 px high to click, without making its row taller */
.admin-doc .a-main a { display: inline-block; padding: 12px 0; margin: -12px 0; }
/* Room for a usual address on one line; a long one breaks after its "@" */
.admin-table .a-email { min-width: 11em; }
/* Every row's buttons one size (a table cell sizes its grid to the buttons' own widths) */
.card .a-buttons .btn { min-width: 9.5em; }
.card .a-buttons .btn { width: 100%; }
.card .a-action .btn { margin-top: 0; min-height: 44px; white-space: nowrap; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Narrow screens: one block per row, each small cell after its column's heading */
@media (max-width: 720px) {
  .admin-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .admin-table, .admin-table tbody { display: block; }
  .admin-table tr {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .admin-table tbody tr:last-child { border-bottom: 0; }
  .admin-table td { display: block; padding: 0; border: 0; text-align: left; }
  .admin-table td[data-label]::before { content: attr(data-label) ": "; }
  .admin-table td:empty { display: none; }
  /* Each row a card: a document is one tap (its title's link covers the card); a person's details sit on
     one line, then their two buttons side by side */
  .admin-table tr, .admin-table tbody tr:last-child {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .admin-table .a-main, .admin-table .a-email, .admin-table .a-person, .admin-table .a-action { flex-basis: 100%; }
  .admin-table .a-email { color: var(--muted-strong); }
  .admin-table .a-narrow { width: auto; }
  .admin-table .a-action { white-space: normal; }
  /* An event: when and what on the first line, the address, then the IP address and device */
  .admin-activity .a-when { order: -2; }
  .admin-activity .a-event { order: -1; margin-left: auto; }
  .admin-activity tr.failed { border-left: 4px solid var(--warn); padding-left: 11px; }
  .admin-activity tr.failed td:first-child { box-shadow: none; padding-left: 0; }
  .admin-activity .a-device { flex-basis: auto; }
  .card .jump { display: block; }
  .admin-person td.a-small { display: none; }
  .a-line { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
  .admin-doc:hover { border-color: var(--primary); }
  .admin-doc .a-main a { display: block; padding: 11px 0; margin: -11px 0; text-decoration: none; }
  .admin-doc .a-main a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
  .a-buttons { display: flex; gap: var(--space-buttons); margin-top: 8px; }
  .a-buttons form { flex: 1 1 0; min-width: 0; }
  .card .a-action .btn { width: 100%; min-width: 0; padding: 0 8px; }
  .admin-table .a-email { min-width: 0; }
}

/* The sign-in page */
.card.signin .btn { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; }
.card .note {
  margin-top: 16px;
  overflow-wrap: anywhere;
  padding: 8px 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.card .note.problem { color: var(--note-text); background: var(--note-bg); border-color: var(--warn); }
.card .note + p { margin-top: 16px; }
.card .or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 14px;
}
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.signin-form { margin-top: 20px; text-align: left; }
.field.code-field { font-size: 24px; text-align: center; letter-spacing: 0.3em; }
.field::placeholder { color: var(--muted); opacity: 1; }
.card .signin-form .btn { margin-top: 0; }
.signin-form .field { margin-bottom: var(--space-actions); }
.card .signin-form + .btn { margin-top: var(--space-buttons); }

/* Who is signed in, in the header (9 Nov): the name and address, small, just after the MultiSig title, then
   the tabs on the right, the page's own marked. The links never wrap: on a phone they are the header's
   second row, all on one line, and the name is left out (the foot of My documents shows it). On wider
   screens the name is cut short with an ellipsis before the links ever move. */
.bar.with-tabs .titles { flex: 0 1 auto; }
.user-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  font-size: 14px;
}
.user-name { min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The app's name by the logo, as tall as the logo allows (10 Nov, the tester): on the signed-in pages and the
   sign-in pages (app-bar); the signing pages' bar holds the document's title instead, at its own size */
.bar.with-tabs .doc-title, .bar.app-bar .doc-title {
  /* Only the app's name, on one line: not cut to two lines like a document's title, which hid the bottom of
     its "g" (10 Nov) */
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
  -webkit-line-clamp: none;
  line-clamp: none;
}
/* The tabs (10 Nov, the tester): boxes, one height and gap; the page's own filled in the site's blue, the others
   and Sign out light grey with a thin border. Since 11 Nov (the owner) as big as Make a PDF's buttons (--tab-*),
   with 6 px corners, not pills; on a narrower window and a phone the words and padding shrink a little to fit,
   the height never (below) */
.user-links { flex: none; display: flex; align-items: center; column-gap: 8px; white-space: nowrap;
  font-size: var(--tab-font); }
.user-links a, .user-links .link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tab-height);
  padding: 0 var(--tab-pad);
  border: 1px solid var(--border);
  border-radius: var(--btn-small-radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.user-links a:hover, .user-links .link:hover { border-color: var(--muted); background: var(--surface); }
/* Only the colours change on the page's own tab: the same weight, padding and border as the others, so that no
   tab moves from page to page (10 Nov) */
.user-links a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.user-links a[aria-current="page"]:hover { background: var(--primary); }
.user-links a:focus-visible, .user-links .link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.user-bar form { margin: 0; }
@media (max-width: 800px) {
  /* The tabs are the header's second row, with room below them; a header without them keeps its room
     under the logo. Up to 800 px, not 600, since the tabs grew to Make a PDF's button size (11 Nov): the admin's
     five no longer fit beside the title in a narrower window */
  .bar { flex-wrap: wrap; row-gap: 0; }
  .bar.with-tabs { row-gap: 8px; padding-bottom: 8px; } /* clear of Sign out, 44 px beside the 40 px logo */
  .user-bar { flex-basis: 100%; justify-content: flex-start; font-size: 15px; }
  .user-bar .user-name { display: none; }
  .user-links { column-gap: 6px; font-size: 15px; }
  .user-links a, .user-links .link { padding: 0 12px; }
  /* Sign out moves up to the right of the title's row, so that the page tabs have their row to themselves
     (10 Nov: five rounded tabs do not fit a phone's width); the sticky bar is what it is placed in */
  .bar.with-tabs .user-links form { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) - 2px); right: 16px; }
}
@media (max-width: 340px) {
  .user-links { font-size: 14px; }
  .user-links a, .user-links .link { padding: 0 10px; }
}
/* The short tab names (Documents, Signature, Admin) are for phones: tabs.css */
.tab-short { display: none; }

/* Adopt a signature */
.adopt-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.adopt-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.adopt-card h1 { margin: 0 0 6px; font-size: 22px; }
/* The card's buttons sit right under the signature, at their own size, the main one on the right;
   on a narrow phone one is half the card's width, and two share it */
.card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-buttons); margin: var(--space-actions) 0 0; }
.card-actions .btn { flex: 0 0 auto; min-width: 160px; text-align: center; }
@media (max-width: 480px) {
  .card-actions .btn { flex: 0 1 auto; min-width: calc(50% - var(--space-buttons) / 2); padding: 0 12px; }
  /* Words too long for half the card: the buttons stack, the main one on top */
  .card-actions.stack { flex-direction: column-reverse; }
  .card-actions.stack .btn { flex: none !important; width: 100%; min-width: 0; }
  .card-actions:has(.btn:not([hidden]) ~ .btn:not([hidden])) .btn { flex: 1 1 0; min-width: 0; }
  .card-actions:not(:has(.btn:not([hidden]) ~ .btn:not([hidden]))) .btn { flex: 1 1 100%; }
}
.adopt-card .message { margin-top: 12px; border: 1px solid var(--warn); border-radius: 6px; }
.lead { margin: 0 0 16px; color: var(--muted); }
.small-label { display: block; margin-bottom: 4px; font-size: 14px; color: var(--muted); }
.hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.link {
  padding: 8px 0;
  font: inherit;
  font-size: 14px;
  color: var(--link);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.saved-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 8px;
}
.saved-sig .small-label { flex-basis: 100%; margin: 0; }
.saved-sig img { height: 48px; max-width: 60%; object-fit: contain; background: #ffffff; border-radius: 4px; }
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tabs [role="tab"] {
  flex: 1;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  color: var(--muted-strong);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.tabs [role="tab"]:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.pad-frame {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.pad-frame::after { /* the line to sign on */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 24%;
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}
#pad {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1; /* adopt.js matches the drawing's size to this */
  color: var(--ink);
  touch-action: none;
  cursor: crosshair;
}
@media (max-width: 480px) {
  #pad { aspect-ratio: 2 / 1; }
}
.pad-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.pad-foot .hint { margin: 0; }
.pad-foot .btn.clear { flex: none; min-height: 44px; min-width: 72px; padding: 0 12px; }
.field {
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.field:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.preview { --inset: 16px; display: grid; place-items: center; aspect-ratio: 3 / 1; padding: 8px 16px; }
.typed-preview {
  display: inline-block; /* so that it can lean */
  max-width: 100%;
  padding: 0 0.3em; /* room for the lean at both ends */
  overflow: hidden;
  font: 40px/1.8 "MultiSig Noto Sans", "MultiSig Noto Sans Myanmar", sans-serif;
  white-space: nowrap; /* adopt.js sets a long name smaller until it fits, whole */
  transform: skewX(-12deg); /* a Latin name leans like handwriting, as the saved picture does */
}
.typed-preview.upright { transform: none; } /* Burmese is written upright, and the saved picture is too */
/* A picture of a signature (uploaded, cleaned or saved) sits inside its box, whole and centred, with a 16 px
   margin all round: shrunk (or grown) to fit, never cropped, however wide or tall */
.preview img {
  position: absolute;
  inset: var(--inset);
  width: calc(100% - 2 * var(--inset));
  height: calc(100% - 2 * var(--inset));
  max-width: none;
  object-fit: contain;
  object-position: center;
}
.file-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-btn:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; }
#panel-upload .preview { margin-top: 12px; }
#panel-upload .pad-frame::after { content: none; }
.tip {
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--note-text);
  background: var(--note-bg);
  border: 1px solid var(--warn);
  border-radius: 6px;
}
/* The cleaned signature, on squares so that what was taken away shows */
.checkered {
  background-color: var(--check-a);
  background-image: conic-gradient(var(--check-b) 25%, transparent 0 50%, var(--check-b) 0 75%, transparent 0);
  background-size: 16px 16px;
  border-style: solid;
}
.pad-frame.checkered::after { content: none; }

/* The desktop app's sign-in question: yes above no */
.card .app-decision { display: flex; flex-direction: column; gap: var(--space-buttons); margin-top: var(--space-actions); }

/* The developer readout (batch 17, sign.js: toggleReadout): a triple tap on the bar's title. Numbers only, for the
   tester's screenshots; it never takes a tap. */
.readout {
  position: fixed;
  left: 4px;
  top: 56px;
  z-index: 9; /* over the pins and messages (5), under the bar (10) */
  max-width: calc(100vw - 8px);
  margin: 0;
  padding: 6px 8px;
  font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 6px;
  pointer-events: none;
}
.readout[hidden] { display: none; }