/* pdfsign, on the paste-up table it shares with resume maker.
   Graphite chrome, a plain grey desk, and white paper as the subject. Two
   blues with separate jobs: non-photo blue (the layout artist's pencil) marks
   the interface, what's selected, armed or current; ink blue is only ever
   ink, what you put on the page. */

@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url(fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url(fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap; src: url(fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url(fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2"); }

/* Handwriting faces for typed signatures. Bundled rather than fetched from
   Google Fonts: pdfsign makes no network requests, and a font request would
   quietly tell a third party that you're signing something. Each face is split
   into Latin and extended Latin, so only the half a name needs gets loaded. */
@font-face { font-family: "Caveat"; font-weight: 500; font-display: block; src: url(fonts/caveat-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-weight: 500; font-display: block; src: url(fonts/caveat-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Herr Von Muellerhoff"; font-display: block; src: url(fonts/herr-von-muellerhoff-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Herr Von Muellerhoff"; font-display: block; src: url(fonts/herr-von-muellerhoff-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Homemade Apple"; font-display: block; src: url(fonts/homemade-apple-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Mrs Saint Delafield"; font-display: block; src: url(fonts/mrs-saint-delafield-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mrs Saint Delafield"; font-display: block; src: url(fonts/mrs-saint-delafield-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* The frame you hold, the panel set into it, the desk the paper lies on. */
  --frame:        #1d2023;
  --panel:        #25292d;
  --well:         #1a1d20;   /* inputs sit recessed */
  --desk:         #4c5258;
  --rule:         rgba(255, 255, 255, 0.08);
  --rule-hi:      rgba(255, 255, 255, 0.16);
  --raise:        rgba(255, 255, 255, 0.05);
  --raise-hi:     rgba(255, 255, 255, 0.1);

  /* Surfaces that float: menus, dialogs, the text style bar. */
  --blotter:      #2b3035;
  --blotter-deep: var(--frame);
  --blotter-edge: #3a4046;

  --chrome-ink:   #eceff1;
  --chrome-dim:   #9aa3ab;
  --chrome-faint: #6c757d;
  --paper:        #ffffff;
  --paper-ink:    #1b1e21;
  --paper-dim:    #5f676e;
  --paper-rule:   #d8dde1;

  --pencil:       #8fd3ec;   /* the interface's one colour */
  --pencil-ink:   #0d2a36;   /* text on pencil */
  --select:       rgba(143, 211, 236, 0.12);
  --ink-hi:       var(--pencil);

  --ink:          #1f3aa8;   /* signature ink: only for what goes on the page */
  --ink-wash:     rgba(31, 58, 168, 0.08);
  --black-ink:    #1a1c1e;
  --fail:         #b3362c;
  --fail-hi:      #ff8f86;   /* failure, as text on the dark chrome */

  --ui: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --bar-h: 56px;
  --rail-w: 80px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Classes that set display (.btn, .empty) would otherwise un-hide [hidden]. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-rows: var(--bar-h) 1fr;
  background: var(--frame);
  color: var(--chrome-ink);
  font-family: var(--ui);
  font-size: 14.5px;
  line-height: 1.5;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--ink-hi); outline-offset: 2px; }

/* Scrollbars that belong to the desk instead of the operating system. */
.desk, .thumbs__list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* ---------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.btn svg {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:disabled { opacity: 0.4; cursor: default; }

.btn--primary { background: var(--pencil); color: var(--pencil-ink); }
.btn--primary:not(:disabled):hover { background: #aee0f2; }

.btn--quiet { border-color: var(--rule); background: var(--raise); color: var(--chrome-ink); }
.btn--quiet:not(:disabled):hover { background: var(--raise-hi); }

.btn--icon { width: 38px; padding: 0; font-size: 18px; color: var(--chrome-ink); }
.btn--icon:not(:disabled):hover { background: var(--raise-hi); }

/* ---------------------------------------------------------- top bar */

.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 20px;
  background: var(--frame);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}

.bar__mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.bar__mark svg {
  width: 28px; height: 28px;
  fill: none;
  stroke: var(--ink-hi);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bar__doc {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--chrome-dim);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar__doc strong { color: var(--chrome-ink); font-weight: 600; }

.bar__actions { display: flex; align-items: center; gap: 8px; }

.bar__sep { width: 1px; height: 24px; margin: 0 4px; background: var(--rule); }

/* Zoom reads as one control: a recessed track with the level in the middle. */
.zoom {
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.zoom .btn--icon { width: 34px; min-height: 34px; border-radius: 9px; }

.pages-toggle svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pages-toggle[aria-pressed="true"] { background: var(--select); color: var(--ink-hi); }

.zoom__level {
  min-width: 58px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--chrome-ink);
}

.zoom__level:not(:disabled):hover { background: var(--raise-hi); }
.zoom__level:disabled { opacity: 0.4; }

/* ---------------------------------------------------------- tool rail + desk */

.work {
  display: grid;
  grid-template-columns: var(--rail-w) auto 1fr;
  min-height: 0;
}

.tools { grid-column: 1; }
.thumbs { grid-column: 2; }
.desk { grid-column: 3; }

.tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: var(--frame);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Tools come in families: pick, sign, write, mark, cover. */
.tools__sep {
  flex: none;
  height: 1px;
  margin: 4px 12px;
  background: var(--rule);
}

.tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--chrome-dim);
  font-size: 11.5px;
  font-weight: 500;
  transition: background-color 0.12s, color 0.12s;
}

.tool svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool svg .thin { stroke-width: 1; opacity: 0.6; }

.tool:hover { color: var(--chrome-ink); background: var(--raise); }

/* The active tool gets an ink-blue ribbon on the rail's edge, like a
   bookmark left in the page. */
.tool[aria-pressed="true"] {
  color: var(--chrome-ink);
  background: var(--select);
}

.tool[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ink-hi);
}

.tool[aria-pressed="true"] svg { stroke: var(--ink-hi); }

.tools__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 10px;
}

.inks__label {
  margin-bottom: 2px;
  color: var(--chrome-dim);
  font-size: 11px;
  font-weight: 500;
}

.inks { display: flex; gap: 8px; }

.ink {
  width: 24px; height: 24px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--ink);
  /* The outer hairline keeps black ink visible against the dark rail. */
  box-shadow: inset 0 0 0 2px var(--frame), 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: transform 0.12s;
}

.ink:hover { transform: scale(1.08); }

.ink[data-ink="black"] { background: var(--black-ink); }
.ink[aria-checked="true"] { border-color: var(--ink-hi); }

.desk {
  position: relative;
  overflow: auto;
  background: var(--desk);
  overscroll-behavior: contain;
  /* Keep the scrollbar's space reserved, so fitting a page to the width
     doesn't come out a scrollbar too wide once the pages arrive. */
  scrollbar-gutter: stable;
}

.pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 32px 24px 120px;
  width: max-content;
  min-width: 100%;
}

.page {
  position: relative;
  flex: none;
  background: var(--paper);
  border-radius: 1px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 6px 12px -2px rgba(0, 0, 0, 0.25),
    0 22px 44px -8px rgba(0, 0, 0, 0.45);
}

.page__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page__fields, .page__items {
  position: absolute;
  inset: 0;
}

.page__items { pointer-events: none; }
.page__items > * { pointer-events: auto; }

.pages[data-armed] .page { cursor: crosshair; }
.pages[data-armed] .field { pointer-events: none; }
.pages[data-armed="rect"] .page { touch-action: none; }

/* --- fillable form fields: a faint ink wash says "you can type here" --- */

.field {
  position: absolute;
  margin: 0;
  padding: 0 0.25em;
  border: 0;
  border-bottom: 1px solid rgba(31, 58, 168, 0.45);
  border-radius: 0;
  background: var(--ink-wash);
  color: var(--paper-ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.15;
}

.field:hover { background: rgba(31, 58, 168, 0.14); }
.field:focus { outline: 2px solid var(--ink); outline-offset: 0; background: #fff; }
.field:disabled { background: none; border-bottom-color: transparent; }

textarea.field { resize: none; padding-top: 0.15em; }
select.field { padding: 0; }

.field--check, .field--radio {
  appearance: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(31, 58, 168, 0.45);
  cursor: pointer;
}

.field--radio { border-radius: 50%; }

.field--check:checked::after {
  content: "";
  width: 62%; height: 32%;
  margin-top: -14%;
  border: solid var(--paper-ink);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.field--radio:checked::after {
  content: "";
  width: 50%; height: 50%;
  border-radius: 50%;
  background: var(--paper-ink);
}

/* --- placed items --- */

.item {
  position: absolute;
  touch-action: none;
  cursor: move;
  user-select: none;
}

.item img { display: block; width: 100%; height: 100%; pointer-events: none; }

/* A stamp on a page that was turned after it was placed turns with it. */
.item .is-turned { position: absolute; left: 50%; top: 50%; max-width: none; }

.item--rect { background: #fff; }

.item__text {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2;
  white-space: pre;
  outline: none;
  min-width: 1ch;
}

.item.is-editing { cursor: text; user-select: text; }
.item__text:empty::before { content: "Type here"; color: var(--paper-dim); opacity: 0.7; }

.item.is-selected::before,
.item:focus-visible::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px dashed var(--ink);
  border-radius: 3px;
  pointer-events: none;
}

.item--rect.is-selected::before { border-style: solid; border-color: var(--ink); inset: -1px; }
.item:focus-visible { outline: none; }

.item__handle {
  position: absolute;
  right: -9px; bottom: -9px;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  cursor: nwse-resize;
  display: none;
}

/* A bigger invisible hit area so a fingertip can find it. */
.item__handle::after { content: ""; position: absolute; inset: -10px; }

.item.is-selected .item__handle { display: block; }
.item.is-editing .item__handle { display: none; }

.item__chip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0; /* set by placeChip */
  display: none;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--frame);
  box-shadow: 0 0 0 1px var(--rule), 0 8px 20px rgba(0, 0, 0, 0.35);
  cursor: default;
}

.item.is-selected .item__chip { display: flex; }

.item__chip button {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--chrome-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.item__chip button:hover { background: var(--blotter-edge); }
.item__chip .danger:hover { background: var(--fail); }

.item__chip-sep { flex: none; width: 1px; margin: 5px 3px; background: var(--rule); }

/* Text style bar: each typeface shown in itself, bold as a toggle, and
   colour as a swatch. */
.item__chip .chip-face { min-width: 32px; padding: 0 6px; font-size: 15px; font-weight: 400; }
.item__chip .chip-bold { min-width: 30px; font-size: 15px; font-weight: 800; }

.item__chip [aria-pressed="true"] { background: var(--select); color: var(--ink-hi); }

.item__chip .chip-color {
  display: grid;
  place-items: center;
  min-width: 28px;
  padding: 0;
}

.item__chip .chip-color::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.item__chip .chip-color[aria-pressed="true"] { background: none; }
.item__chip .chip-color[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--frame), 0 0 0 4px var(--ink-hi); }

.ghost {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
}

.ghost img { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------- page panel */

.thumbs {
  display: flex;
  flex-direction: column;
  width: 172px;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--rule);
}

.thumbs__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 14px 10px 10px;
  list-style: none;
  overflow-y: auto;
}

.thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 6px;
  border-radius: 12px;
  cursor: grab;
  user-select: none;
  transition: background-color 0.12s;
}

.thumb:hover { background: var(--raise); }
.thumb[aria-current="page"] { background: var(--select); }
.thumb:focus-visible { outline-offset: -2px; }
.thumb.is-dragging { opacity: 0.45; }
.thumbs.is-sorting, .thumbs.is-sorting .thumb { cursor: grabbing; }

.thumb__frame {
  position: relative;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.thumb__frame canvas { display: block; width: 100%; height: 100%; }

/* The page you're reading: an ink-blue edge, like a tab in a binder. */
.thumb[aria-current="page"] .thumb__frame { box-shadow: 0 0 0 2px var(--ink-hi), 0 3px 8px rgba(0, 0, 0, 0.35); }
.thumb[aria-current="page"] .thumb__num { color: var(--ink-hi); }

.thumb__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.thumb__tools { display: flex; gap: 1px; }

.thumb__num {
  min-width: 24px;
  color: var(--chrome-dim);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.thumb__btn, .thumb__grip {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--chrome-dim);
}

.thumb__btn svg, .thumb__grip svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thumb__grip svg { stroke-width: 3; }
.thumb__grip { touch-action: none; cursor: grab; }

.thumb__btn:hover { background: var(--raise-hi); color: var(--chrome-ink); }
.thumb__btn--danger:hover { background: var(--fail); color: #fff; }

/* With a mouse, the controls stay out of the way until you point at a page,
   and the whole thumbnail is the drag handle. */
@media (hover: hover) {
  .thumb__grip { display: none; }

  /* Controls float over the top of the page on hover, leaving just the
     number underneath the rest of the time. */
  .thumb__tools {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px;
    border-radius: 9px;
    background: rgba(29, 32, 35, 0.94);
    box-shadow: 0 0 0 1px var(--rule), 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.12s;
  }

  .thumb__btn { color: var(--chrome-ink); }
  .thumb:hover .thumb__tools, .thumb:focus-within .thumb__tools { opacity: 1; }
  .thumbs.is-sorting .thumb__tools { opacity: 0; }
}

.thumbs__foot {
  display: flex;
  padding: 10px;
  border-top: 1px solid var(--rule);
}

.thumbs__foot .btn { flex: 1; }

/* ---------------------------------------------------------- empty state */

.empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.empty[hidden] { display: none; }

.empty__sheet {
  width: min(440px, 100%);
  padding: 40px 36px 36px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 6px 12px -2px rgba(0, 0, 0, 0.25),
    0 26px 50px -10px rgba(0, 0, 0, 0.5);
  transform: rotate(-1.2deg);
  transition: transform 0.2s ease;
}

.desk.is-dropping .empty__sheet { transform: rotate(0) scale(1.03); }

.empty__sheet svg {
  width: 150px;
  height: 50px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: sign 1.6s 0.2s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

@keyframes sign { to { stroke-dashoffset: 0; } }

.empty__sheet h1 {
  margin: 14px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-ink);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.empty__sheet p { margin: 0 0 22px; color: var(--paper-dim); line-height: 1.55; }

/* ---------------------------------------------------------- hint + toast */

.hint, .toast {
  position: fixed;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100vw - 32px);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  font-size: 14px;
}

/* The armed-tool banner: solid ink blue, big enough to find from across the
   room, with the stamp itself riding along so there's no doubt what the next
   click does. */
.hint {
  top: calc(var(--bar-h) + 16px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 10px;
  border-radius: 16px;
  background: var(--pencil);
  color: var(--pencil-ink);
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(143, 211, 236, 0.3);
}

.hint:not(:has(.hint__preview)) { padding-left: 22px; }

.hint__preview {
  display: grid;
  place-items: center;
  flex: none;
  height: 52px;
  max-width: 160px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--paper);
}

.hint__preview img { max-height: 40px; max-width: 136px; }

.hint__preview--text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hint__text { white-space: nowrap; }

.hint__cancel {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: rgba(13, 42, 54, 0.12);
  color: var(--pencil-ink);
  font-size: 15px;
  font-weight: 600;
}

.hint__cancel:hover { background: rgba(13, 42, 54, 0.2); }

@media (prefers-reduced-motion: no-preference) {
  .hint.is-nudging { animation: hint-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3), hint-ring 1.2s 0.3s ease-out 2; }
}

@keyframes hint-in {
  from { transform: translate(-50%, -14px) scale(0.92); opacity: 0; }
}

@keyframes hint-ring {
  0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(143, 211, 236, 0.3); }
  50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 14px rgba(143, 211, 236, 0); }
  100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(143, 211, 236, 0.3); }
}

@media (max-width: 760px) {
  .hint { gap: 10px; font-size: 16px; }
  .hint__text { white-space: normal; }
  .hint__preview { height: 44px; max-width: 110px; }
  .hint__preview img { max-height: 32px; max-width: 90px; }
}

.toast {
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 16px;
  border-radius: 11px;
  background: #eef1f3;
  color: var(--frame);
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.toast[data-tone="error"] { background: #ffe1de; color: #5a1410; }
.toast:not(:has(#toast-action:not([hidden]))) { padding: 10px 16px; }
.toast .btn { min-height: 32px; padding: 0 11px; border: 0; border-radius: 7px; background: rgba(0, 0, 0, 0.08); color: inherit; font-weight: 700; }
.toast .btn:not(:disabled):hover { background: rgba(0, 0, 0, 0.14); }
.hint[hidden], .toast[hidden] { display: none; }

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

.sheet {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border: 1px solid var(--rule-hi);
  border-radius: 14px;
  background: var(--blotter);
  color: var(--chrome-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.sheet--wide { width: min(640px, calc(100vw - 32px)); }

.sheet::backdrop { background: rgba(10, 12, 14, 0.55); }

.sheet h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sheet__lede { margin: 6px 0 16px; color: var(--chrome-dim); font-size: 14px; overflow-wrap: anywhere; }

.sheet__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.sheet__spacer { flex: 1; }

.sheet .ink { box-shadow: inset 0 0 0 2px var(--blotter), 0 0 0 1px rgba(255, 255, 255, 0.2); }

.tabs {
  display: flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--well);
}

.tabs button {
  padding: 5px 14px;
  border: 0;
  border-radius: 7px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--chrome-dim);
}

.tabs button[aria-selected="true"] { background: var(--raise-hi); color: var(--chrome-ink); }

.input { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.input > span { font-size: 13px; font-weight: 500; color: var(--chrome-dim); }

.input input, .input select, .input textarea {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--well);
  color: var(--chrome-ink);
}

.input input:focus, .input select:focus, .input textarea:focus {
  border-color: var(--pencil);
  outline: none;
  box-shadow: 0 0 0 3px var(--select);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.check input { width: 16px; height: 16px; accent-color: var(--pencil); }

/* --- the signing surface: the one place the page gets theatrical --- */

.pad__surface {
  position: relative;
  height: 220px;
  border-radius: 10px;
  background: #fbfcfb;
  box-shadow: inset 0 0 0 1px var(--paper-rule);
  touch-action: none;
  cursor: crosshair;
}

.pad__surface canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.pad__line {
  position: absolute;
  left: 28px; right: 28px; bottom: 58px;
  border-bottom: 1.5px solid #aab4ae;
  pointer-events: none;
}

.pad__line span {
  position: absolute;
  left: -2px; bottom: 2px;
  color: #aab4ae;
  font-size: 22px;
  line-height: 1;
}

.pad__clear {
  position: absolute;
  top: 10px; right: 10px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--paper-dim);
  font-size: 13px;
  font-weight: 600;
}

.pad__clear:hover { background: #eef1ef; color: var(--paper-ink); }

.pad__note { margin: 10px 0 0; font-size: 13px; color: var(--chrome-dim); }

.pad__options { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* --- sign on your phone --- */

.phone {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 220px;
}

.phone__qr {
  flex: none;
  display: grid;
  place-items: center;
  width: 196px;
  height: 196px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--paper-rule);
}

.phone__qr svg { display: block; width: 172px; height: 172px; }

.phone[data-state="loading"] .phone__qr,
.phone[data-state="error"] .phone__qr { background: #f3f5f4; }

/* Once the phone has the page, the code has done its job. */
.phone[data-state="opened"] .phone__qr svg { opacity: 0.15; transition: opacity 0.3s; }

.phone__side { flex: 1; min-width: 0; }
.phone__side .btn { margin-top: 12px; }

.phone__status {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.phone[data-state="opened"] .phone__status { color: var(--pencil); }
.phone[data-state="error"] .phone__status { color: var(--fail-hi); }

.phone__url {
  margin: 8px 0 0;
  color: var(--chrome-dim);
  font-size: 13px;
  overflow-wrap: anywhere;
  user-select: all;
}

@media (max-width: 560px) {
  .phone { flex-direction: column; align-items: stretch; text-align: center; }
  .phone__qr { align-self: center; }
}

.pad__error { margin: 12px 0 0; color: var(--fail-hi); font-size: 14px; }

.fonts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.fonts button {
  height: 76px;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid var(--paper-rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fonts button[aria-checked="true"] { border-color: var(--pencil); box-shadow: 0 0 0 2px var(--pencil); }

.drop {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 190px;
  margin-bottom: 12px;
  padding: 16px;
  border: 1.5px dashed var(--paper-rule);
  border-radius: 10px;
  color: var(--paper-dim);
  text-align: center;
  cursor: pointer;
  /* Checkerboard so a knocked-out background visibly reads as transparent. */
  background: repeating-conic-gradient(#f3f5f4 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}

.drop:hover { border-color: var(--pencil); color: var(--paper-ink); }
.drop canvas { max-width: 100%; max-height: 150px; }

/* --- saved signature picker --- */

.stamps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.stamp {
  position: relative;
  display: grid;
  place-items: center;
  height: 96px;
  padding: 12px;
  border: 1px solid var(--paper-rule);
  border-radius: 10px;
  background: var(--paper);
}

.stamps > div { display: grid; }
.stamp:hover { border-color: var(--pencil); box-shadow: 0 0 0 2px var(--pencil); }
/* A grid cell's height is "auto", so a percentage max-height wouldn't hold;
   pin it to the tile's inner height instead. */
.stamp img { max-width: 100%; max-height: 72px; object-fit: contain; }

.stamp__delete {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--paper-dim);
  font-size: 16px;
  line-height: 1;
  opacity: 0;
}

.stamp:hover .stamp__delete, .stamp__delete:focus-visible { opacity: 1; }
.stamp__delete:hover { background: var(--fail); color: #fff; }

.stamps__empty { grid-column: 1 / -1; margin: 0; color: var(--chrome-dim); font-size: 14px; }

/* ---------------------------------------------------------- history */

.history { display: flex; gap: 2px; }
.history .btn--icon svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- form fields bar */

.fieldnav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px var(--rule);
  white-space: nowrap;
}

.fieldnav .btn--icon { width: 32px; min-height: 32px; border-radius: 9px; }
.fieldnav .btn--icon svg { width: 17px; height: 17px; }

.fieldnav__count {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--chrome-ink);
}

.fieldnav__count:hover { background: var(--raise-hi); }
.fieldnav[data-done="true"] .fieldnav__count { color: var(--pencil); }

/* Lock on save: a toggle. Pressed, the padlock closes and turns pencil blue. */
.fieldnav__lock {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-left: 4px;
  padding: 0 10px 0 8px;
  border: 0;
  border-left: 1px solid var(--rule);
  border-radius: 0 9px 9px 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--chrome-dim);
}

.fieldnav__lock svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.fieldnav__lock .shackle { transform: translateY(-1.6px); transition: transform 0.15s; }
.fieldnav__lock:hover { color: var(--chrome-ink); background: var(--raise); }
.fieldnav__lock[aria-pressed="true"] { color: var(--pencil); }
.fieldnav__lock[aria-pressed="true"] .shackle { transform: none; }

/* ---------------------------------------------------------- stamp toolbar icons */

.item__chip .chip-icon { display: grid; place-items: center; min-width: 30px; padding: 0; }

.item__chip .chip-icon svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------- snippets */

.snips { display: grid; gap: 8px; margin-top: 4px; max-height: 55vh; overflow-y: auto; }

.snip {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--raise);
  text-align: left;
}

.snip:hover { border-color: var(--pencil); background: var(--select); }
.snip__label { font-weight: 600; }

.snip__text {
  color: var(--chrome-dim);
  font-size: 13.5px;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.snip:not(:has(.snip__label)) .snip__text { color: var(--chrome-ink); }

.snip-edit { margin: 6px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--rule); }
.snip-edit legend { padding: 0; font-weight: 700; font-size: 15px; float: left; width: 100%; }
.snip-edit .sheet__lede { clear: both; margin-top: 4px; }

.snip-rows { display: grid; gap: 10px; }

.snip-row {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: 8px;
  align-items: start;
}

.snip-row .input { margin: 0; }
.snip-row textarea { height: auto; min-height: 40px; padding: 9px 12px; resize: vertical; font: inherit; line-height: 1.4; }

.snip-row__remove {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-top: 25px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--chrome-dim);
}

.snip-row__remove svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snip-row__remove:hover { background: var(--fail); color: #fff; }

.add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  border: 1px dashed var(--rule-hi);
  border-radius: 9px;
  background: none;
  color: var(--chrome-dim);
  font-weight: 600;
}

.add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.add:hover { border-color: var(--pencil); background: var(--select); color: var(--pencil); }

#profile { overflow-y: auto; }

/* ---------------------------------------------------------- narrow screens */

@media (max-width: 760px) {
  :root { --bar-h: 52px; }

  body { grid-template-rows: var(--bar-h) 1fr auto; }
  .work { display: contents; }

  .bar { gap: 8px; padding: 0 8px 0 12px; }
  .bar__doc { display: none; }
  .bar__mark { flex: 1; }
  .bar__actions { gap: 4px; }
  #save, .zoom__level { display: none; }
  .bar__actions .btn { padding: 0 10px; }

  .desk { grid-row: 2; grid-column: 1; }

  .thumbs {
    position: fixed;
    top: var(--bar-h);
    bottom: 0;
    left: 0;
    z-index: 15;
    box-shadow: 8px 0 24px rgba(0,0,0,0.35);
  }

  .tools {
    grid-row: 3;
    grid-column: 1;
    flex-direction: row;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--blotter-edge);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tool { flex: none; min-width: 62px; }
  .tools__foot { flex-direction: row; margin: 0 0 0 auto; padding: 0 0 0 8px; }

  .pages { padding: 16px 12px 96px; gap: 14px; }

  .toast { bottom: 90px; }

  .stamp__delete { opacity: 1; }

  .fieldnav__lock span, .bar__mark { display: none; }

  /* No room in the bar: the form bar floats above the tools instead. */
  .fieldnav {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 12;
    transform: translateX(-50%);
    background: var(--blotter);
    box-shadow: 0 0 0 1px var(--rule-hi), 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  body:has(.fieldnav:not([hidden])) .toast { bottom: 140px; }

  .bar__actions { margin-left: auto; }
  .bar__actions > .btn--quiet[for="file"], #download { font-size: 0; gap: 0; width: 38px; padding: 0; }
  .history .btn--icon { width: 34px; }
  .snip-row { grid-template-columns: 1fr auto; }
  .snip-row .input:first-child { grid-column: 1 / -1; }
  .snip-row__remove { margin-top: 0; }
}

/* Mid-width windows: the form bar gives up its words before anything else. */
@media (min-width: 761px) and (max-width: 1600px) {
  .fieldnav__lock span { display: none; }
  .fieldnav__lock { padding: 0 8px; }
}

@media (min-width: 761px) and (max-width: 1240px) {
  .bar__actions > .btn--quiet[for="file"] { font-size: 0; gap: 0; width: 38px; padding: 0; }
}

/* A short window: the rail tightens up but keeps every label. If it still
   doesn't fit, it scrolls (see .tools), rather than hiding names. */
@media (min-width: 761px) and (max-height: 780px) {
  .tool { gap: 1px; padding: 4px 2px 3px; }
  .tool svg { width: 20px; height: 20px; }
  .tool > span { font-size: 10.5px; line-height: 1.35; }
  .tools__sep { margin: 3px 12px; }
  .inks__label { display: none; }
  .tools__foot { gap: 4px; padding-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .empty__sheet svg { animation: none; stroke-dashoffset: 0; }
  .empty__sheet { transition: none; }
}

/* ---------------------------------------------------------- in a browser */

/* At yarpdevelopers.com/pdfsign there's no local server: no folder to save
   into, and no phone relay (you're usually on the phone already). */
[data-mode="web"] #save,
[data-mode="web"] .bar__sep,
[data-mode="web"] #pad [data-tab="phone"] { display: none; }