/* Webway Sign — a dark top bar, a page rail, one page, and a tool panel. */

@font-face {
  font-family: 'Sign Doc';
  src: url('/fonts/DejaVuSans.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Sign Doc';
  src: url('/fonts/DejaVuSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}

:root {
  --ink: #0E2338;
  --ink-soft: #5C6E82;
  --ink-faint: #8C9AAA;
  --line: #DDE3EB;
  --line-soft: #EDF1F6;
  --bg: #EDF1F6;
  --panel: #ffffff;
  --field: #F8FAFC;
  --accent: #2E6BE6;
  --accent-dark: #1B4FBF;
  --accent-tint: #EEF4FF;
  --ok: #1F8A6B;
  --ok-tint: #E7F4EF;
  --warn: #8A6212;
  --warn-tint: #FDF3DF;
  --warn-line: #F2DFAE;
  --danger: #D75B45;
  --danger-dark: #C04B37;
  --danger-tint: #FDF0EC;
  --danger-line: #F2D3CB;
  --danger-edge: #EB755B;
  --avatar: #E9A92B;
  --script: 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', cursive;
  --radius: 10px;
  --topbar-h: 56px;
  --docbar-h: 68px;
}

* { box-sizing: border-box; }

/* Several elements below are display:flex/grid, which would otherwise beat the
   `hidden` attribute the JS toggles them with. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ── top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--ink);
  color: #fff;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  font-size: 15px;
  letter-spacing: -.01em;
  color: inherit;
  text-decoration: none;
}
.brand b { font-weight: 700; }
/* The wordmark is white artwork, so it only ever sits on the dark top bar. */
.brand-logo {
  display: block;
  height: 22px;
  width: auto;
  flex: none;
}

.topbar nav { display: flex; gap: 4px; }

.nav-link {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-link.active { background: rgba(255, 255, 255, .12); color: #fff; }

.who { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.who-tenant { font-size: 12px; color: rgba(255, 255, 255, .55); }
.who-name { font-size: 13px; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--avatar);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.btn.on-dark {
  border-color: rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .9);
  background: transparent;
}
.btn.on-dark:hover:not(:disabled) { border-color: #fff; color: #fff; }

.spacer { flex: 1; }

/* ── layout ──────────────────────────────────────────────────────────────── */

/* The editor fills the window below the top bar and scrolls internally, so the
   page rail and the document scroll independently. Every other page just flows. */
.editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h));
}

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── document bar ────────────────────────────────────────────────────────── */

.docbar {
  height: var(--docbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.back-tile {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 15px;
  text-decoration: none;
}
.back-tile:hover { border-color: var(--ink-faint); color: var(--ink); }

.doc-id { min-width: 0; }
.doc-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-meta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

.placed-count { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.save-state { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* ── pills ───────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pill.ok { background: var(--ok-tint); color: var(--ok); }
.pill.warn { background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-line); }
.pill.off { background: #fdecea; color: #8a231c; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.status { padding: 5px 10px; font-size: 12px; }

/* ── page rail ───────────────────────────────────────────────────────────── */

.page-rail {
  width: 104px;
  flex: 0 0 104px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 14px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.rail-label {
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--ink-faint);
}

.rail-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
  width: 100%;
}

.rail-foot { font-size: 10px; color: var(--ink-faint); }

.thumb {
  position: relative;
  flex: none;
  width: 66px; height: 86px;
  border: 0;
  padding: 0 0 5px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
}
.thumb:hover { box-shadow: 0 0 0 1px var(--ink-faint); }
.thumb.current { box-shadow: 0 0 0 2px var(--accent); }

/* A skeleton, not a render: a rail of real page images would ask the server to
   rasterise every page of the document just to open it. */
.thumb-lines {
  position: absolute;
  inset: 7px 8px auto 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.thumb-lines i { height: 2px; background: #E4E9F0; }
.thumb-lines i:nth-child(3) { width: 76%; }
.thumb-lines i:nth-child(5) { width: 58%; }

.thumb-count {
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 9.5px;
  display: grid;
  place-items: center;
}

.thumb-n { position: relative; font-size: 10px; color: var(--ink-soft); }

/* ── viewer ──────────────────────────────────────────────────────────────── */

.viewer {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  min-height: 0;
}

.page-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  /* The whole document, stacked — scrolling it shows the foot of one page above
     the head of the next, which is what reading a contract looks like. */
  flex-direction: column;
  /* `safe` keeps a page zoomed wider than the column from being centred with its
     left edge scrolled out of reach; browsers without it fall back to the line
     above, which is the same thing until you zoom in. */
  align-items: center;
  align-items: safe center;
  gap: 22px;
  padding: 26px 26px 78px;
  scroll-padding-top: 26px;
}

.page-wrap {
  position: relative;
  flex: none;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(14, 35, 56, .35), 0 0 0 1px rgba(14, 35, 56, .08);
  scroll-margin-top: 26px;
}
/* Every page is mounted, but its render is only fetched as it nears the viewport —
   until then the reserved box is what the reader sees, so give it the tone of paper
   waiting rather than of paper missing. */
.page-wrap img { display: block; width: 100%; height: auto; }
.page-wrap img:not([src]) { visibility: hidden; }

.page-number {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -19px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
}

/* The click target and the stamp container are the same box, so a fraction of
   this element's rect is exactly the fraction the server maps back. */
.page-layer { position: absolute; inset: 0; }
.viewer.placing .page-layer { cursor: crosshair; }

/* Pen and highlighter marks, one <svg> per page, sitting between the raster
   image and the click layer — under the fields, exactly as PdfService draws
   them. viewBox is the page in points, not pixels, so a mark is one number at
   any zoom; preserveAspectRatio="none" is a redundant guard for the same
   reason the page-wrap's own aspect-ratio is set from the page itself. */
.ink-layer { position: absolute; inset: 0; pointer-events: none; }

/* While an ink tool is current the page stops being something you click fields
   onto and becomes something you draw on: stamps step out of the way so a
   pointer drawing near one is never mistaken for a drag, and the page-layer
   itself trades its usual cursor and touch scrolling for the pen. */
.viewer.inking .stamp { pointer-events: none; }
.viewer.inking .page-layer { cursor: crosshair; touch-action: none; }
/* The eraser draws its own ring cursor (.erase-ring) — hide the native one so
   the two are not both visible at once. */
.viewer.inking.erasing .page-layer { cursor: none; }

/* The eraser's own cursor: a ring the size of its reach, following the pointer
   rather than sitting fixed under it — see updateEraseRing() in sign.js. */
.erase-ring {
  position: fixed;
  z-index: 50;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: rgba(14, 35, 56, .06);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}

.drop-hint {
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  border: 2px dashed var(--accent);
  background: rgba(46, 107, 230, .05);
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.editor.dragging .drop-hint { display: flex; }
.drop-hint span {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  background: #fff;
  border: 1px solid #D7E4FE;
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: 0 10px 24px -14px rgba(14, 35, 56, .5);
}
/* A tile drag must not be intercepted by a stamp already on the page. */
.editor.dragging .stamp { pointer-events: none; }

.zoombar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(14, 35, 56, .4);
  z-index: 6;
}
.zoom-step {
  width: 26px; height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.zoom-step:hover { background: var(--bg); color: var(--ink); }
.zoom-value { font-size: 12px; font-weight: 600; padding: 0 6px; min-width: 44px; text-align: center; }
.zoom-sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.zoom-page { font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 0 6px; }

/* ── tool panel ──────────────────────────────────────────────────────────── */

.tools {
  width: 332px;
  flex: 0 0 332px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* One scroll for the whole panel — see the comment in editor.html. Deliberately a
   block and not a flex column: a flex column that scrolls squashes its fixed-height
   children (the rule, the tiles) instead of letting them overflow. */
.tools-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.tools-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
}

.tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}
.tools-head-hint { font-size: 10px; color: var(--ink-faint); }

/* Eight tiles, four across: Select is the tool that places nothing and is how
   you stop placing and start arranging; Text/Date/Initials/Sign place fields;
   Highlight/Draw/Eraser lay ink straight onto the page instead — see
   `.viewer.inking` below for how the page tells the two apart. */
.tool-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 18px 16px;
}

.tile {
  position: relative;
  height: 62px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: grab;
  font: inherit;
  color: var(--ink);
}
.tile:hover { border-color: #B9C6D6; }
.tile.current { border-color: var(--accent); background: rgba(46, 107, 230, .07); box-shadow: inset 0 0 0 1px var(--accent); }
.tile-glyph { font-size: 15px; line-height: 1; position: relative; }
.tile-glyph.serif { font-family: Georgia, serif; font-weight: 700; font-size: 14px; }
.tile-glyph.script { font-family: var(--script); font-size: 18px; }
.tile-label { font-size: 10.5px; color: var(--ink-soft); position: relative; }

/* A tile is selected in the colour of the person the next field is for, so the
   tool and the person read as one answer rather than two settings. */
.tile.current.for-other {
  border-color: var(--field-colour);
  background: color-mix(in srgb, var(--field-colour) 8%, #fff);
  box-shadow: inset 0 0 0 1px var(--field-colour);
}

.tools-rule { height: 1px; background: var(--line-soft); }

.tools-body {
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pane { display: flex; flex-direction: column; gap: 12px; }
.pane h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tools-hint {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--field);
  border: 1px solid var(--line-soft);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ── form controls ───────────────────────────────────────────────────────── */

.row { display: flex; gap: 8px; align-items: flex-end; }
.grow { flex: 1; }

label { display: block; font-size: 12px; color: var(--ink-soft); }
label.checkbox, label.radio {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
label.colour { flex: 0 0 auto; }

input[type=text], input[type=date], input[type=file], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--field);
}
select { background: #fff; }
input[type=text]:focus, select:focus, input[type=date]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
input[type=color] {
  width: 38px; height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
input[type=range] { width: 100%; }

/* Bold is a checkbox that looks like the B in a formatting bar. */
.toggle { flex: 0 0 auto; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-face {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.toggle input:checked + .toggle-face { background: var(--ink); border-color: var(--ink); color: #fff; }
.toggle input:focus-visible + .toggle-face { outline: 2px solid var(--accent); }

/* Preset colours for the ink panes — a click sets the custom <input type=color>
   beside them, so the two are one choice rather than two competing ones. */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 28px; height: 28px;
  flex: none;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--swatch-colour);
  cursor: pointer;
}
.swatch.current { box-shadow: 0 0 0 2px var(--accent); }

.segmented { display: flex; gap: 8px; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block;
  text-align: center;
  font-size: 13px;
  padding: 9px;
  border-radius: var(--radius);
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
}
.segmented input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

.hint { margin: 0; font-size: 12px; color: var(--ink-soft); }
.fine { font-size: 12px; color: var(--ink-soft); max-width: 42ch; margin: 14px auto 0; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: #F4F6F9; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.block { display: block; width: 100%; margin-top: 8px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.ghost { background: transparent; font-weight: 400; }
.btn.tiny { padding: 4px 8px; font-size: 12px; font-weight: 400; }

a.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

.linklike {
  border: 0; background: none; padding: 0;
  color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline;
}

/* ── split place button ──────────────────────────────────────────────────── */

.split { position: relative; }
.split-row { display: flex; }
.split-face { flex: 1; border-radius: var(--radius) 0 0 var(--radius); padding: 12px; }
.split-caret {
  width: 44px;
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 1px solid rgba(255, 255, 255, .28);
  font-size: 12px;
}

.split-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 40px -18px rgba(14, 35, 56, .45);
  z-index: 5;
}
.menu-label {
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink-faint);
  padding: 6px 8px 8px;
}
.corner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 10px; }
.menu-rule { height: 1px; background: var(--line-soft); margin: 0 8px 8px; }

.corner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.corner.current { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dark); }
.corner-box {
  width: 20px; height: 24px;
  flex: none;
  border: 1px solid #C9D2DC;
  border-radius: 2px;
  background: #fff;
  display: flex;
  padding: 2px;
}
.corner-box i { width: 6px; height: 4px; border-radius: 1px; background: var(--ink-faint); }
.corner.current .corner-box i { background: var(--accent); }

.menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover { background: #F4F6F9; }
.menu-glyph { font-size: 14px; line-height: 1.2; }
.menu-item b { display: block; font-size: 13px; font-weight: 600; }
.menu-item em { display: block; font-size: 11px; font-style: normal; color: var(--ink-faint); }

/* ── saved signature / initials preview ──────────────────────────────────── */

.stamp-preview {
  height: 76px;
  display: grid;
  place-items: center;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  cursor: grab;
}
.stamp-preview.tall { height: 96px; }
/* Definite pixels, not percentages. The image is a grid item in an auto-sized
   implicit row, so a percentage max-height resolves against an indefinite size
   and is dropped — only max-width applied, and a wide signature scaled to the
   full width came out taller than the box and crossed the rounded border. The
   numbers are the content box: height less the 1px border and 8px padding.
   overflow is a guard, not the fix: the image must scale down, never crop. */
.stamp-preview img { max-width: 100%; max-height: 58px; }
.stamp-preview.tall img { max-height: 78px; }
.stamp-preview .empty { font-size: 12px; color: var(--ink-soft); cursor: default; }

/* ── drop zone (document list) ───────────────────────────────────────────── */

.dropzone {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}
.dropzone-inner {
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 48px 40px;
  background: var(--panel);
  max-width: 560px;
}
.dropzone h1 { margin: 0 0 6px; font-size: 20px; }
.dropzone p { margin: 4px 0; color: var(--ink-soft); }
.viewer.dragover .dropzone-inner { border-color: var(--accent); background: var(--accent-tint); }

/* ── placed stamps ───────────────────────────────────────────────────────── */

.stamp {
  position: absolute;
  cursor: move;
  touch-action: none;
  outline: 1px dashed transparent;
  outline-offset: 2px;
}
.stamp:hover { outline-color: var(--ink-soft); }
.stamp.selected { outline: 1px solid var(--accent); }
.viewer.placing .stamp { pointer-events: none; }
/* The stamp just placed is the one exception: sticky arming keeps every other
   stamp click-through so the next click always lands on the page, but the one
   that was just created should be draggable on the very next mousedown without
   forcing the user to disarm first. See placeOne()/startDrag() in sign.js. */
.viewer.placing .stamp.just-placed { pointer-events: auto; }
/* The remove (x) and resize handle straddle the box, sitting several pixels
   outside its corners. While still armed the next click is usually another
   placement nearby, not a deliberate hit on a tiny control — leave these two
   click-through so a near-miss places a field instead of deleting or resizing
   the one just placed. */
.viewer.placing .stamp.just-placed .remove,
.viewer.placing .stamp.just-placed .handle { pointer-events: none; }

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

.stamp-text {
  white-space: pre;
  /* 'Sign Doc' is the very font the exporter embeds, and LINE_RATIO is measured
     off it server-side — swapping it here would make the preview lie. */
  font-family: 'Sign Doc', serif;
  /* font-size and line-height are set from the box height in JS. */
}

/* The little green caption above a stamp, naming what it is. */
.stamp-tag {
  position: absolute;
  top: -15px;
  left: 0;
  white-space: nowrap;
  font-family: system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ok);
  pointer-events: none;
  opacity: 0;
}
.stamp:hover .stamp-tag, .stamp.selected .stamp-tag { opacity: 1; }

.stamp .handle {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent);
  background: #fff;
  border-radius: 2px;
  display: none;
}
.stamp.selected .handle { display: block; }
.stamp .handle.resize { right: -7px; bottom: -7px; cursor: nwse-resize; }

.stamp .remove {
  position: absolute;
  top: -9px; right: -9px;
  width: 18px; height: 18px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.stamp .remove:hover { border-color: #EB755B; color: #EB755B; }
.stamp.selected .remove { display: grid; }

/* ── arming bar + toast ──────────────────────────────────────────────────── */

.arming-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(14, 35, 56, .6);
  z-index: 40;
}

.toast {
  position: fixed;
  left: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 18px 40px -18px rgba(14, 35, 56, .6);
  z-index: 60;
  max-width: min(420px, 70vw);
}
.toast .toast-mark {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  font-size: 11px;
}
.toast.bad .toast-mark { background: var(--danger); }

/* ── capture modal ───────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(14, 35, 56, .45);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 20px;
}
.modal-card {
  width: min(680px, 100%);
  background: var(--panel);
  border-radius: 14px;
  padding: 18px;
}
/* Three settings side by side on a wide screen, stacking as the card narrows. Top-
   aligned so the labels line up, and one field style whatever the input type — the
   number box otherwise fell back to the browser's own. */
.modal-card .row { flex-wrap: wrap; align-items: flex-start; }
.modal-card .row > .stack { flex: 1 1 150px; }
.modal-card .row input, .modal-card .row select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink);
  background: var(--field);
}
.activity-note { margin-top: 12px; }
.modal-card header, .modal-card footer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-card header h2 { margin: 0; font-size: 16px; flex: 1; }
.modal-card footer { justify-content: flex-end; margin-top: 14px; }
/* `margin: 0` is the half of this that matters: a bare <form> carries the browser's
   own `margin-block-end: 1em`, and in a centre-aligned footer that extra 14px below
   it pushes the button half of it — 7px — above the button beside it. */
.modal-card footer form.inline { display: flex; margin: 0; }
.modal-card footer .btn { display: inline-flex; align-items: center; justify-content: center; }

.tabs { display: flex; gap: 6px; margin: 12px 0; }

.capture-saved {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.capture-saved-img {
  flex: 1 1 160px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.capture-saved-img img { max-width: 100%; max-height: 56px; }
.tab {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.tabpane { display: flex; flex-direction: column; gap: 10px; }

#draw-canvas {
  width: 100%;
  height: 210px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: repeating-conic-gradient(#f4f6f9 0% 25%, #fff 0% 50%) 50% / 14px 14px;
  touch-action: none;
  cursor: crosshair;
}

.typed-preview {
  height: 150px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: repeating-conic-gradient(#f4f6f9 0% 25%, #fff 0% 50%) 50% / 14px 14px;
  font-family: var(--script);
  font-size: 46px;
  color: #122e4d;
  overflow: hidden;
  padding: 0 16px;
  white-space: nowrap;
}

.upload-preview {
  min-height: 90px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: repeating-conic-gradient(#f4f6f9 0% 25%, #fff 0% 50%) 50% / 14px 14px;
}
.upload-preview img { max-height: 130px; max-width: 100%; }

/* ── narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  body { overflow: auto; }
  .editor { height: auto; }
  .layout { flex-direction: column; }
  .page-rail {
    width: 100%; flex: none;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 14px;
    gap: 12px;
  }
  .rail-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .tools { width: 100%; flex: none; border-left: 0; border-top: 1px solid var(--line); }
  .page-scroll { overflow: visible; padding: 18px 14px 60px; }
  .docbar { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
}

/* ── flashes ─────────────────────────────────────────────────────────────── */

form.inline { display: inline; }

.flash {
  margin: 12px auto 0;
  max-width: 1100px;
  padding: 9px 14px;
  border-radius: 8px;
}
.flash-error { background: #fdecea; color: #8a231c; border: 1px solid #f3c2bd; }
.flash-notice { background: var(--ok-tint); color: var(--ok); border: 1px solid #bfe0ca; }

/* ── login ───────────────────────────────────────────────────────────────── */

body.centred { display: grid; place-items: center; min-height: 100vh; }

.auth-card {
  width: min(360px, 92vw);
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -30px rgba(14, 35, 56, .5);
}
.auth-card h1 { margin: 0 0 18px; font-size: 18px; font-weight: 400; }
/* The wordmark is white, so the card grows a dark band for it to sit on. The
   negative margin bleeds that band to the card's edge; 13px is the card's 14px
   radius less its 1px border. */
.auth-card .auth-brand {
  margin: -28px -28px 22px;
  padding: 22px;
  display: grid;
  place-items: center;
  background: var(--ink);
  border-radius: 13px 13px 0 0;
}
.auth-card .auth-brand .brand-logo { height: 26px; }
.auth-card label { margin-bottom: 12px; }
.auth-card input { margin-top: 4px; }
.auth-error { padding: 8px 10px; border-radius: 8px; background: #fdecea; color: #8a231c; }
.auth-note { padding: 8px 10px; border-radius: 8px; background: var(--ok-tint); color: var(--ok); }
.auth-alt { margin: 14px 0 0; font-size: 12px; color: var(--ink-soft); text-align: center; }

/* ── two-factor sign-in ──────────────────────────────────────────────────── */

.totp-qr { display: block; width: 200px; height: 200px; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; }
.totp-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: .06em;
  padding: 8px 12px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: inline-block;
}
.recovery-codes {
  columns: 2;
  gap: 12px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}
.recovery-codes li { padding: 2px 0; }

input[type=email], input[type=password] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--field);
}

/* ── ordinary pages (list, users, tenants) ───────────────────────────────── */

.sheet {
  max-width: 1100px;
  margin: 22px auto 60px;
  padding: 0 20px;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.sheet-head h1 { margin: 0; font-size: 20px; flex: 1; letter-spacing: -.01em; }

h2.sub { margin: 32px 0 6px; font-size: 14px; }

.empty-note { color: var(--ink-soft); }
.muted { color: var(--ink-soft); }

.table-wrap {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.grid th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
  font-weight: 700;
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: #F8FAFC; }

.doc-link { display: block; color: var(--ink); font-weight: 600; text-decoration: none; }
a.doc-link:hover { text-decoration: underline; }
.by { display: block; font-size: 12px; color: var(--ink-soft); }
.nowrap { white-space: nowrap; }

.actions-col { white-space: nowrap; }
.actions-col .btn { text-decoration: none; margin-right: 4px; }
.perm-cell { display: table-cell; }
.perm-cell label { display: inline-flex; margin-right: 10px; }

input.narrow { width: 130px; display: inline-block; margin-right: 6px; }

.stack-form {
  margin-top: 10px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.stack-form .row { align-items: flex-end; margin: 8px 0; }

/* ── cards (used by the users and tenants pages) ─────────────────────────── */

.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--panel);
}
.card h2 {
  margin: 0 0 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
.card.disabled { opacity: .5; pointer-events: none; }

.arming-hint { font-size: 12px; opacity: .75; }

/* A stamp on a document you may view but not edit is scenery, not a control. */
.stamp.locked { cursor: default; outline: none; }
.stamp.locked:hover { outline: none; }
.stamp.locked .stamp-tag { opacity: 0; }

/* ══ the document library ══════════════════════════════════════════════════
   A list whose rows carry a real render of page one, a docked preview beside it,
   and a delete that says out loud what it is about to take away. */

.library {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
  padding: 22px 26px 26px;
  gap: 16px;
}

.lib-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
/* The upload button is wrapped in a form, and a bare <form> carries the browser's own
   `margin-block-end: 1em` — 14px of empty space under it that lifted the button clear
   of the search box and the view switch beside it. `margin: 0` is the whole of that
   fix; `display: flex` only keeps the form the exact size of the button inside it.
   The heights are the other half: left to their own padding the three controls come
   out a pixel or two apart, which reads as a wobble rather than a row. The padding is
   overridden here rather than on `.search` and `.view-btn` themselves so those stay
   usable at their natural size elsewhere. */
.lib-head form.inline { display: flex; margin: 0; }
.lib-head .search,
.lib-head .viewswitch,
.lib-head form.inline > .btn { height: 40px; box-sizing: border-box; }
.lib-head .search { padding: 0 12px; }
.lib-head .view-btn { padding: 0 14px; }
.lib-title h1 {
  margin: 0;
  font: 600 24px/1.15 Georgia, 'Times New Roman', serif;
  letter-spacing: -.01em;
}
.lib-count { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 12px; width: 240px;
}
.search-glyph { color: var(--ink-faint); font-size: 14px; }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink);
}

.viewswitch {
  display: flex; align-items: stretch; gap: 2px; padding: 3px;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius);
}
.view-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-soft);
}
.view-btn.current { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

.lib-tabs {
  display: flex; gap: 22px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-tab {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: inherit; font-size: 13.5px; cursor: pointer;
  padding: 0 2px 12px; border: 0; background: none;
  color: var(--ink-soft); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.lib-tab.current { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tab-pill {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 7px;
  background: var(--bg); color: var(--ink-faint);
}
.lib-tab.current .tab-pill { background: var(--accent-tint); color: var(--accent-dark); }

.lib-body { display: flex; gap: 18px; flex: 1; min-height: 0; align-items: flex-start; }
.lib-scroll { flex: 1; min-width: 0; }

.lib-colhead {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 150px 108px 176px;
  align-items: center; gap: 16px;
  padding: 0 14px 6px;
  font-size: 10px; letter-spacing: .1em; font-weight: 700; color: var(--ink-faint);
}
.lib-colhead .right { text-align: right; }

.doc-rows { display: flex; flex-direction: column; gap: 10px; }

.doc-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 150px 108px 176px;
  align-items: center; gap: 16px;
  padding: 13px 14px; border-radius: 13px;
  background: #fff; border: 1px solid var(--line);
  cursor: pointer; outline: 0;
}
.doc-row:hover { border-color: #B9C6D6; }
.doc-row.current {
  border-color: var(--accent);
  background: var(--field);
  box-shadow: 0 14px 28px -22px rgba(14, 35, 56, .6);
}
.doc-row:focus-visible { box-shadow: 0 0 0 3px var(--accent-tint); }

/* The page render sits on a white card the size of a page, so a document that has
   not loaded its image yet still reads as a document. */
.page-chip {
  position: relative; width: 72px; height: 94px; overflow: hidden;
  background: #fff; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line), 0 6px 14px -10px rgba(14, 35, 56, .5);
}
.page-chip img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; opacity: 0; transition: opacity .18s ease;
}
.page-chip img.ready { opacity: 1; }
.page-chip-fade {
  position: absolute; inset: auto 0 0 0; height: 14px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.doc-cell { min-width: 0; }
.doc-name-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.doc-name {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-name:hover { color: var(--accent-dark); }
.badge-turn {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: #E0A32E; border-radius: 5px; padding: 3px 6px;
}
.doc-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.doc-progress { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.doc-progress .bar {
  width: 104px; height: 5px; border-radius: 999px;
  background: #E4E9F0; overflow: hidden; flex: none;
}
.doc-progress .bar i { display: block; height: 100%; background: var(--accent); }
.doc-progress .bar i.done { background: var(--ok); }
.doc-progress-note { font-size: 11.5px; color: var(--ink-faint); }

.doc-status .doc-activity { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-you   { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }
.chip-them  { color: var(--accent-dark); background: var(--accent-tint); border-color: #D7E4FE; }
.chip-done  { color: #16624C; background: var(--ok-tint); border-color: #C9E5DA; }
.chip-draft { color: var(--ink-soft); background: var(--bg); border-color: var(--line); }

.signer-stack { display: flex; align-items: center; }
.signer {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--ink);
}
.signer + .signer, .signer.more { margin-left: -8px; }
.signer.sc1 { background: var(--accent); }
.signer.sc2 { background: var(--avatar); color: var(--ink); }
.signer.more { background: var(--bg); color: var(--ink-soft); }
.tiny { font-size: 11.5px; }
.muted { color: var(--ink-faint); }

.doc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }

/* The word, with the glyph in front of it. The label is its own span so Thymeleaf's
   th:text cannot wipe the icon out. */
.doc-primary { display: inline-flex; align-items: center; gap: 6px; }
.doc-primary-icon { font-size: 12px; line-height: 1; opacity: .8; }
.btn.primary .doc-primary-icon { opacity: 1; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 14px; text-decoration: none;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
}
.icon-btn:hover { background: var(--bg); border-color: #B9C6D6; }

/* Colour is the whole point of these two: green carries the file away, red destroys
   it, and neither needs reading to be told apart at a glance. */
.icon-btn.download { color: var(--ok); font-size: 15px; }
.icon-btn.download:hover { background: var(--ok-tint); border-color: #9FD3C0; color: var(--ok); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover {
  background: var(--danger-tint); border-color: var(--danger-edge); color: var(--danger);
}
.icon-btn svg { display: block; }

/* ── paging ──────────────────────────────────────────────────────────────── */

.lib-pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 14px 2px 2px;
}
.pager-pages { display: flex; align-items: center; gap: 6px; }
.pager-btn {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.pager-btn:hover:not(:disabled):not(.current) { background: var(--bg); border-color: #B9C6D6; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-btn.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager-gap { color: var(--ink-faint); font-size: 12.5px; padding: 0 2px; }
.pager-note { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); }

/* ── grid view ───────────────────────────────────────────────────────────── */

.library[data-view="grid"] .doc-rows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px;
}
.library[data-view="grid"] .doc-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 0; overflow: hidden;
}
.library[data-view="grid"] .page-chip {
  width: 100%; height: 210px; border-radius: 0;
  box-shadow: none; border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.library[data-view="grid"] .page-chip img { object-position: top center; }
.library[data-view="grid"] .doc-cell,
.library[data-view="grid"] .doc-status,
.library[data-view="grid"] .signer-stack,
.library[data-view="grid"] .doc-actions { padding: 0 14px; }
.library[data-view="grid"] .doc-actions { justify-content: flex-start; padding-bottom: 14px; }
.library[data-view="grid"] .doc-progress { display: none; }

/* ── the docked preview ──────────────────────────────────────────────────── */

.preview-dock {
  width: 380px; flex: none; align-self: stretch;
  display: flex; flex-direction: column; min-height: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  position: sticky; top: 16px; max-height: calc(100vh - var(--topbar-h) - 48px);
}
.dock-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); }
.dock-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-top: 6px; }
.dock-meta { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }

.dock-body {
  flex: 1; min-height: 0; overflow-y: auto; background: var(--bg);
  padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.dock-page {
  width: 300px; max-width: 88%; background: #fff; display: block;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(14, 35, 56, .45);
}
.dock-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dock-thumb {
  width: 30px; height: 40px; object-fit: cover; object-position: top center;
  background: #fff; cursor: pointer; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line);
}
.dock-thumb.current { box-shadow: 0 0 0 2px var(--accent); }

.btn.danger-ghost {
  color: var(--danger); background: #fff; border-color: var(--danger-line);
  justify-content: center;
}
.btn.danger-ghost:hover { background: var(--danger-tint); border-color: var(--danger-edge); }
.btn.destructive { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn.destructive:hover { background: var(--danger-dark); border-color: var(--danger-dark); }

/* ── the delete confirmation ─────────────────────────────────────────────── */

.modal-card.narrow { width: 452px; max-width: 94vw; }
.confirm-head { display: flex; align-items: flex-start; gap: 14px; }
.confirm-glyph {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--danger-tint); color: var(--danger);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.confirm-head h2 { margin: 0; font: 600 20px/1.2 Georgia, serif; letter-spacing: -.01em; }
.confirm-head p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.confirm-doc {
  margin-top: 18px; display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 11px;
  background: var(--field); border: 1px solid var(--line-soft);
}
.confirm-mini {
  width: 34px; height: 44px; flex: none; background: #fff; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line); padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
}
.confirm-mini i { height: 1.5px; background: #E4E9F0; }
.confirm-mini i:first-child { height: 2px; width: 60%; background: var(--ink); opacity: .5; }
.confirm-mini i:last-child { width: 70%; }
.confirm-mini-name { font-size: 13px; font-weight: 600; }
.confirm-warn {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
  padding: 11px 13px; border-radius: 11px; font-size: 12px; line-height: 1.5;
  background: var(--warn-tint); border: 1px solid var(--warn-line); color: var(--warn);
}

@media (max-width: 1180px) {
  .preview-dock { display: none; }
}
@media (max-width: 900px) {
  .doc-row, .lib-colhead { grid-template-columns: 56px minmax(0, 1fr); }
  .lib-colhead { display: none; }
  .doc-status, .signer-stack { display: none; }
  .doc-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .page-chip { width: 56px; height: 74px; }
}

/* ══ editor additions ══════════════════════════════════════════════════════ */

/* ── the save state ──────────────────────────────────────────────────────── */

.savebox {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; color: var(--ink-soft);
  padding: 5px 10px; border-radius: 999px;
  background: var(--field); border: 1px solid var(--line);
}
.save-icon {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; background: var(--ink-faint);
}
.savebox[data-state="saved"] { color: #16624C; background: var(--ok-tint); border-color: #C9E5DA; }
.savebox[data-state="saved"] .save-icon { background: var(--ok); }
.savebox[data-state="saved"] .save-icon::after { content: '✓'; }
.savebox[data-state="unsaved"] { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }
.savebox[data-state="unsaved"] .save-icon { background: #E0A32E; }
.savebox[data-state="unsaved"] .save-icon::after { content: '•'; }
.savebox[data-state="error"] { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-line); }
.savebox[data-state="error"] .save-icon { background: var(--danger); }
.savebox[data-state="error"] .save-icon::after { content: '!'; }
.savebox[data-state="idle"] .save-icon::after { content: '·'; }
/* Spinning rather than a static word, because "Saving…" that never changes and
   "Saving…" that is genuinely in flight should not look identical. */
.savebox[data-state="saving"] .save-icon {
  background: transparent;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: save-spin .7s linear infinite;
}
@keyframes save-spin { to { transform: rotate(360deg); } }

.brand-tile {
  background: var(--accent); color: #fff; font-family: Georgia, serif; font-weight: 700;
}

/* ── page rail thumbnails ────────────────────────────────────────────────── */

/* The drawn skeleton stays underneath as what a page looks like before its render
   arrives, so the rail never shows an empty hole. */
.thumb { position: relative; overflow: hidden; }
.thumb-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .18s ease; background: #fff;
}
.thumb-shot.ready { opacity: 1; }
.thumb-count, .thumb-n { position: relative; z-index: 2; }
.thumb.current .thumb-shot { box-shadow: inset 0 0 0 1px var(--accent); }

/* ── placeholder and assigned fields ─────────────────────────────────────── */

.stamp { --field-colour: var(--accent); }

/* An empty field has to look like an invitation rather than like text somebody
   forgot to delete — dashed, tinted, and in its owner's colour. */
.stamp.placeholder {
  outline: 1.5px dashed var(--field-colour);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--field-colour) 8%, transparent);
  opacity: .82;
}
.stamp.placeholder > span:not(.stamp-tag) { opacity: .6; font-style: italic; }
.stamp.required::before {
  content: '';
  position: absolute; top: -5px; right: -5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 1.5px solid #fff;
}
.stamp-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--field-colour); white-space: nowrap; overflow: hidden;
}
.stamp.theirs { opacity: .5; }
.stamp.editing {
  outline: 2px solid var(--accent); outline-offset: 2px;
  background: #fff; opacity: 1;
}
.stamp.editing > span:not(.stamp-tag) { opacity: 1; font-style: normal; }
.stamp.editing .remove, .stamp.editing .handle { display: none; }

/* ── panels in the tool column ───────────────────────────────────────────── */

.panel {
  border: 1px solid var(--line); border-radius: 12px; background: var(--field);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent-dark); background: var(--accent-tint);
  border-radius: 5px; padding: 3px 6px;
}
.stack { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-soft); }
.stack > input, .stack > select, .stack > textarea { font: inherit; font-size: 13px; }
.assign {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.assign-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Same colour formula as .send-chip and .person — a field, its chip and
   its row in the people list all read as the one person at a glance. */
.assign-chip {
  --field-colour: var(--ink-soft);
  font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  background: #fff; color: var(--ink);
}
.assign-chip:hover { border-color: color-mix(in srgb, var(--field-colour) 50%, var(--line)); }
.assign-chip.selected {
  border-color: var(--field-colour); color: var(--field-colour);
  background: color-mix(in srgb, var(--field-colour) 12%, #fff);
  font-weight: 600;
}

/* ── who the next field is for ───────────────────────────────────────────── */

.people-block { display: flex; flex-direction: column; }
.people { display: flex; flex-direction: column; gap: 6px; padding: 0 18px; }

/* The whole row is the control. The bar down its left edge is the same colour the
   person's fields are drawn in on the page, so a row and a field agree at a glance —
   the convention `.assign-chip`, `.send-chip` and `.stamp` already share. */
.person {
  --field-colour: var(--accent);
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  overflow: hidden;
}
.person.current {
  border-color: var(--field-colour);
  background: color-mix(in srgb, var(--field-colour) 8%, #fff);
  box-shadow: inset 3px 0 0 var(--field-colour);
}
.person-row {
  display: flex; align-items: center; gap: 9px;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 8px 10px; color: var(--ink);
}
.person-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--field-colour); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.person-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.person-id b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-id em {
  font-style: normal; font-size: 10.5px; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.person.current .person-id em { color: var(--field-colour); }
.person-count {
  flex: none; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 999px;
  background: var(--bg); color: var(--ink-faint); border: 1px solid transparent;
}
.person-count.some { color: var(--field-colour); border-color: color-mix(in srgb, var(--field-colour) 25%, #fff); }
.person.current .person-count.some { background: #fff; }
.person-drop {
  flex: none; font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  border: 0; background: none; color: var(--ink-faint); padding: 0 2px;
}
.person-drop:hover { color: var(--danger); }
/* The signing link only exists once the document has been sent, so the second line
   appears with it rather than being an empty strip on every row in a draft. */
.person-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 8px; margin-top: -2px;
}
.person-status {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 7px;
  background: var(--bg); color: var(--ink-soft);
}
.person-status.completed { background: var(--ok-tint); color: #16624C; }
.person-status.opened { background: var(--accent-tint); color: var(--accent-dark); }
.person-link {
  font: inherit; font-size: 11px; cursor: pointer; border: 0; background: none;
  color: var(--accent); padding: 0;
}

.person-add {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 18px 0; padding: 9px 10px;
  font: inherit; font-size: 12px; color: var(--ink-soft); text-align: left;
  background: none; border: 1px dashed #C9D2DC; border-radius: 10px; cursor: pointer;
}
.person-add:hover { border-color: var(--accent); color: var(--accent-dark); }
.person-add-glyph { font-size: 14px; line-height: 1; }

.person-form {
  margin: 8px 18px 0; padding: 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--field);
  display: flex; flex-direction: column; gap: 8px;
}
.person-tabs { display: flex; gap: 6px; }
.person-tab {
  flex: 1; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 7px 8px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
}
.person-tab.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.person-tabpane { display: flex; flex-direction: column; gap: 7px; }
.person-form input { font: inherit; font-size: 12.5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.person-search { background: #fff; height: 34px; padding: 0 10px; }
.person-search input { border: 0; padding: 0; font-size: 12.5px; }

.directory {
  max-height: 168px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
}
.dir-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line-soft); padding: 8px 10px;
}
.dir-row:first-child { border-top: 0; }
.dir-row:hover:not(.added) { background: var(--bg); }
/* Already on the document: shown, greyed, and unclickable — reading a name as
   "there already" is the answer, and a list that silently drops them is not. */
.dir-row.added { opacity: .55; cursor: default; }
.dir-avatar {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--bg); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.dir-row.added .dir-avatar { background: var(--ink-faint); color: #fff; }
.dir-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dir-id b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-id em { font-style: normal; font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-state { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.dir-row.added .dir-state { color: var(--ok); }
.dir-empty { padding: 14px 12px; font-size: 11.5px; color: var(--ink-faint); text-align: center; }

/* ── whose field the next one is ─────────────────────────────────────────── */

.for-banner {
  --field-colour: var(--accent);
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 18px 10px; padding: 9px 11px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--field-colour) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--field-colour) 28%, #fff);
  color: var(--field-colour);
  font-size: 11.5px; line-height: 1.4;
}
.for-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--field-colour); margin-top: 4px; }

.proxy-panel { --field-colour: var(--accent); }
.proxy-head { display: flex; align-items: center; gap: 9px; }
.proxy-who { min-width: 0; }
.proxy-title { font-size: 14px; font-weight: 600; }
.proxy-role { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proxy-note {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px;
}
.proxy-req { display: flex; align-items: center; gap: 8px; }
.req-pill {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--field-colour) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--field-colour) 40%, #fff);
  color: var(--field-colour);
}
.req-pill.off { background: var(--bg); border-color: var(--line); color: var(--ink-soft); }
.proxy-req-note { font-size: 11px; color: var(--ink-faint); }

.send-people { display: flex; flex-wrap: wrap; gap: 7px; }
.send-chip {
  --field-colour: var(--accent);
  font-size: 12px; border-radius: 999px; padding: 5px 11px;
  background: color-mix(in srgb, var(--field-colour) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--field-colour) 35%, #fff);
  color: var(--ink);
}
#send-message { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; resize: vertical; }

/* ── the password gate ───────────────────────────────────────────────────── */

.signing-body { background: var(--bg); }
.gate {
  min-height: calc(100vh - var(--topbar-h));
  display: flex; align-items: center; justify-content: center; padding: 32px 20px;
}
.gate-card {
  width: 420px; max-width: 100%; background: #fff; border-radius: 16px;
  border: 1px solid var(--line); padding: 30px 28px 26px; text-align: center;
  box-shadow: 0 30px 60px -34px rgba(14, 35, 56, .5);
}
.gate-glyph { font-size: 30px; }
.gate-card h1 { margin: 12px 0 0; font: 600 20px/1.3 Georgia, serif; }
.gate-why { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.gate-form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.gate-form input {
  font: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
}
.gate-error { margin: 0; font-size: 12.5px; color: var(--danger); }

.editor.finished .tools, .editor.finished .docbar #btn-finish { opacity: .5; pointer-events: none; }

/* ── a recipient's own checklist ─────────────────────────────────────────── */

/* With no placing tiles rendered the container would otherwise hold an empty
   bordered strip on the signing page. */
.tool-tiles:empty { display: none; }

.myfields { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.myfield {
  display: flex; align-items: center; gap: 9px; text-align: left; width: 100%;
  font: inherit; cursor: pointer; padding: 8px 10px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
}
.myfield:hover { border-color: var(--accent); }
.myfield-mark {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px dashed var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff;
}
.myfield.done .myfield-mark { background: var(--ok); border: 0; }
.myfield-label { display: flex; flex-direction: column; min-width: 0; }
.myfield-label b { font-size: 12.5px; }
.myfield-label em { font-style: normal; font-size: 11px; color: var(--ink-faint); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOLDERS (HANDOFF's "Unit 3") — appended block, own section, do not interleave.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */

.lib-crumbs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-soft); margin-bottom: 2px;
}
.lib-crumbs a { color: var(--ink-soft); text-decoration: none; border-radius: 5px; padding: 2px 3px; }
.lib-crumbs a:last-of-type { color: var(--ink); font-weight: 600; }
.lib-crumbs a:hover { background: var(--line-soft); color: var(--ink); }
.lib-crumbs a.drop-target { background: var(--accent-tint); outline: 2px dashed var(--accent); }
.crumb-sep { color: var(--ink-faint); }
.lib-crumbs #folder-menu-btn { margin-left: 2px; }

/* ── subfolder tiles ─────────────────────────────────────────────────────── */

.folder-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin: 4px 0 14px;
}
.folder-tile {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: #fff; text-decoration: none; color: inherit;
}
.folder-tile:hover { border-color: #B9C6D6; background: var(--line-soft); }
.folder-tile.drop-target { border-color: var(--accent); background: var(--accent-tint); outline: 2px dashed var(--accent); }
.folder-tile-icon { font-size: 18px; line-height: 1; }
.folder-tile-name {
  font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding-right: 20px;
}
.folder-tile-count { font-size: 11.5px; color: var(--ink-soft); }
.folder-tile-menu {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
  border: 0; background: transparent;
}
.folder-tile-menu:hover { background: #fff; border: 1px solid var(--line); }

/* ── row folder label (every tab but "All documents") ───────────────────── */

.doc-folder-label { display: none; }
.showing-folder-labels .doc-folder-label {
  display: inline-block; font-size: 11px; color: var(--ink-soft);
  background: var(--line-soft); border-radius: 5px; padding: 1px 6px; margin-left: 6px;
}
.doc-row.drop-target { border-color: var(--accent); background: var(--accent-tint); }

/* ── small icon buttons (folder menus) ───────────────────────────────────── */

.icon-btn.tiny { width: 24px; height: 24px; font-size: 12px; }

/* ── floating folder menu (rename/share/delete) ──────────────────────────── */

.folder-menu {
  position: absolute; z-index: 40; min-width: 130px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 4px;
  box-shadow: 0 14px 34px -18px rgba(14, 35, 56, .45);
  display: flex; flex-direction: column;
}
.folder-menu button {
  all: unset; cursor: pointer; padding: 7px 10px; border-radius: 7px;
  font-size: 13px; color: var(--ink);
}
.folder-menu button:hover { background: var(--bg); }
.folder-menu button[data-action="delete"] { color: var(--danger); }
.folder-menu button[data-action="delete"]:hover { background: var(--danger-tint); }

/* ── modal form fields (new folder / rename) ─────────────────────────────── */

.field-label { display: block; font-size: 12px; color: var(--ink-soft); margin: 10px 0 5px; }
.text-input {
  width: 100%; font: inherit; font-size: 13.5px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px; box-sizing: border-box;
}
.text-input:focus { outline: none; border-color: var(--accent); }
.field-error { margin: 8px 0 0; font-size: 12.5px; color: var(--danger); }

/* ── share modal ──────────────────────────────────────────────────────────── */

.share-toggle {
  display: flex; align-items: flex-start; gap: 9px; font-size: 13px;
  margin: 14px 0; padding: 10px 12px; background: var(--field);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.share-toggle input { margin-top: 2px; }
.share-members {
  display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto;
  border-top: 1px solid var(--line-soft);
}
.share-member {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--line-soft);
}
.share-member-name { display: flex; flex-direction: column; min-width: 0; }
.share-member-name b { font-size: 13px; }
.share-member-name .muted { font-size: 11.5px; }
.share-member select { font: inherit; font-size: 12.5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; }

/* ── OS file drop ─────────────────────────────────────────────────────────── */

.drop-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(14, 35, 56, .55);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.drop-overlay-card {
  background: #fff; border-radius: 16px; padding: 34px 40px; text-align: center;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); color: var(--ink); font-weight: 600;
  border: 2px dashed var(--accent);
}
.drop-overlay-glyph { font-size: 30px; color: var(--accent); margin-bottom: 6px; }

.upload-progress {
  position: fixed; right: 18px; bottom: 18px; z-index: 61; width: 260px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 20px 40px -22px rgba(14, 35, 56, .5);
}
.upload-progress-name { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.upload-progress-bar { height: 6px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.upload-progress-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }