/* ─────────────────────────────────────────────────────────────────────────────
   SIGNET — the document preparation screen

   Its own file rather than more of styles.css: it is one screen with a layout
   nothing else in the Hub has, and 200 lines of it in a 3,000-line stylesheet is
   how a stylesheet stops being readable.

   Palette tokens only — --navy, --blue, --accent and the surface variables. The
   one thing this screen adds is that the PAGE ITSELF must read as paper: white,
   square-cornered, with a real shadow under it, sitting on a recessed surface.
   Anything glassy or tinted over the top of it would be the Hub restyling a
   document whose whole promise is that it looks like itself.
   ───────────────────────────────────────────────────────────────────────────── */

.signet-prep-overlay { padding: 18px; }

.signet-prep {
  background: var(--card);
  border-radius: 16px;
  width: min(1240px, 100%);
  height: min(92vh, 100%);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(10, 22, 40, 0.38);
  animation: fadeSlideUp .22s cubic-bezier(.34, 1.56, .64, 1) both;
  overflow: hidden;
}

.signet-prep-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 13px;
  border-bottom: 1px solid var(--border);
}
.signet-prep-name { flex: 1; max-width: 460px; }
.signet-prep-name .signet-label { margin-bottom: 4px; }

/* rail + stage. The rail does not scroll with the page: the palette has to stay
   reachable on page 9 of a 12-page document. */
.signet-prep-body {
  flex: 1;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  min-height: 0;
}
.signet-prep-rail {
  border-right: 1px solid var(--border);
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, rgba(59, 158, 218, 0.045), transparent 220px);
}
.signet-prep-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ── What did not survive the conversion ─────────────────────────────────── */
.signet-prep-notes { display: flex; flex-direction: column; gap: 8px; }
.signet-prep-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
  border-left: 3px solid var(--accent);
  background: rgba(59, 158, 218, 0.07);
  border-radius: 0 8px 8px 0;
  padding: 9px 11px;
}
/* The one that says the excluded-document check could not run. It is not a
   footnote and must not read like one. */
.signet-prep-note.is-loud {
  border-left-color: #d97706;
  background: rgba(245, 158, 11, 0.13);
  color: #92400e;
  font-weight: 500;
}

/* ── The field palette ───────────────────────────────────────────────────── */
.signet-field-palette { display: flex; flex-direction: column; gap: 7px; }
.signet-field-head {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
  margin-bottom: 2px;
}
.signet-field-head b {
  display: block;
  font-size: 12.5px;
  color: var(--text-1);
  margin-bottom: 3px;
}
/* The "who finishes this document" panel. It is the answer to a question people
 * kept looking for a button for, so it reads as a statement rather than a hint:
 * a tinted card with a bold first line, not grey small print under the list. */
.signet-field-foot {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2, #334155);
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(30, 87, 153, 0.14);
  background: rgba(240, 246, 255, 0.85);
  backdrop-filter: blur(6px);
}
.signet-field-foot b { color: #0b1f3a; }
.signet-field-foot-more {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-3);
}
/* Green: nothing more is needed. Blue: a manager is involved. Amber: this
 * document cannot be finished as it stands. */
.signet-field-foot.is-ok {
  border-color: rgba(4, 120, 87, 0.22);
  background: rgba(236, 253, 245, 0.9);
}
.signet-field-foot.is-ok b { color: #047857; }
/* The two ways a document gets counter-signed, offered where the decision is
 * made. Cards rather than bare radios: the second one carries a sentence about
 * what actually happens, and a bare radio label cannot hold that. */
.signet-sign-mode {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 4px;
}
.signet-sign-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(30, 87, 153, 0.16);
  background: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.signet-sign-choice:hover { border-color: rgba(30, 87, 153, 0.36); }
.signet-sign-choice b { display: block; color: #0b1f3a; font-size: 12px; }
.signet-sign-choice input { margin-top: 2px; cursor: pointer; flex: none; }
.signet-sign-choice.is-on {
  border-color: rgba(30, 87, 153, 0.42);
  background: rgba(240, 246, 255, 0.95);
}
/* No saved signature yet. Shown and explained rather than hidden — a control
   that vanishes teaches nobody where to find it. */
.signet-sign-choice.is-blocked {
  opacity: .62;
  cursor: default;
  background: rgba(248, 250, 252, 0.7);
}
.signet-sign-choice.is-blocked:hover { border-color: rgba(30, 87, 153, 0.16); }
.signet-sign-choice.is-blocked input { cursor: not-allowed; }

.signet-field-foot.is-warn {
  border-color: rgba(180, 83, 9, 0.28);
  background: rgba(255, 247, 237, 0.92);
}
.signet-field-foot.is-warn b { color: #92400e; }

.signet-field-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.signet-field-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.signet-field-chip.is-armed {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.signet-field-chip.is-placed { opacity: .62; }
.signet-field-chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  flex: none;
}
/* The manager's fields are a different colour everywhere they appear -- chip,
   box on the page, row in the list -- so "whose signature is that?" is answered
   by looking rather than by reading. */
.signet-field-chip[data-role="manager"] .signet-field-chip-dot { background: #8b5cf6; }
.signet-field-chip-text { display: block; min-width: 0; }
.signet-field-chip-text b {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--text-1);
}
.signet-field-chip-text em {
  font-style: normal; font-size: 11px; color: var(--text-3);
}

/* ── What is already on the document ─────────────────────────────────────── */
.signet-field-list {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.signet-field-list.is-empty {
  font-size: 11.5px; color: var(--text-3); line-height: 1.5;
}
.signet-field-list-head {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}
/* TWO LINES, not one squeezed one. The rail is 268px wide, and cramming the
 * label, the tick, a "12 of 15 pages" summary and an × onto one flex line gave
 * every part its own narrow column — the label wrapped to two lines and the
 * summary to six. Anything long goes underneath instead. */
.signet-field-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 6px 9px;
  border-radius: 7px;
  border: 0;
  border-left: 3px solid var(--accent);
  background: var(--surface-2, rgba(30, 87, 153, 0.05));
  font-size: 12px;
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}
.signet-field-row[data-role="manager"] { border-left-color: #8b5cf6; }
.signet-field-row:hover { background: var(--accent-soft); }
.signet-field-row em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;          /* "12 of 15 pages" is one thing, not three */
}
.signet-field-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.signet-field-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Line two: the tick and the pages it is NOT on, together. The FIELD NAME gets
 * line one to itself — squeezed onto one line with everything else it ellipsised
 * to "Employee i…", which is the one word that distinguishes it from the
 * manager's. */
.signet-field-row-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.signet-field-skip {
  font-size: 11px;
  line-height: 1.45;
  color: #92400e;
}

/* The page checklist. Small enough that fifteen fit in a 268px rail on two
 * rows, big enough to hit. Struck through and faded = the initials are off
 * that page; the ring marks the page you are looking at, so the × on the
 * document and the number here are visibly the same thing. */
.signet-field-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.signet-page-chip {
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  border-radius: 5px;
  border: 1px solid rgba(30, 87, 153, 0.20);
  background: #fff;
  color: var(--text-2, #334155);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.signet-page-chip:hover {
  background: var(--accent-soft, rgba(59, 158, 218, 0.12));
  border-color: rgba(30, 87, 153, 0.45);
}
.signet-page-chip.is-off {
  background: rgba(255, 247, 237, 0.9);
  border-color: rgba(180, 83, 9, 0.30);
  color: #92400e;
  text-decoration: line-through;
}
.signet-page-chip.is-here {
  box-shadow: 0 0 0 2px rgba(59, 158, 218, 0.30);
  font-weight: 600;
}

/* ── The page ────────────────────────────────────────────────────────────── */
.signet-prep-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
}
.signet-prep-pager, .signet-prep-zoom {
  display: flex; align-items: center; gap: 10px;
}
.signet-prep-pager .signet-linkbtn,
.signet-prep-zoom .signet-linkbtn {
  font-size: 17px; line-height: 1; padding: 2px 7px;
}
.signet-prep-jump {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-1);
  font-size: 12.5px;
  padding: 2px 4px;
  margin: 0 3px;
}

/* Recessed, so the page reads as a sheet lying on a surface rather than as a
   panel in the app. */
.signet-prep-scroll {
  flex: 1;
  overflow: auto;
  padding: 26px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(1200px 380px at 50% -10%, rgba(59, 158, 218, 0.10), transparent 70%),
    var(--bg-2, #eef2f7);
}

.signet-prep-page {
  position: relative;
  flex: none;
  background: #fff;
  box-shadow: 0 10px 34px rgba(10, 22, 40, 0.26), 0 0 0 1px rgba(10, 22, 40, 0.10);
}
.signet-prep-page.is-armed { cursor: crosshair; }
.signet-prep-page img {
  display: block;
  width: 100%;
  height: 100%;
  /* No max-width:100% from the global reset -- the page is sized in points and
     the scroller is what handles a page wider than the window. */
  max-width: none;
}
.signet-prep-layer { position: absolute; inset: 0; }

/* A field. Deliberately a translucent tint with a solid edge: the words of the
   document underneath have to stay readable, because reading them is how
   somebody decides this is the right spot. */
.signet-field-box {
  position: absolute;
  border: 1.5px solid var(--accent);
  background: rgba(59, 158, 218, 0.17);
  border-radius: 3px;
  cursor: grab;
  touch-action: none;
  transition: background .12s ease, box-shadow .12s ease;
}
.signet-field-box[data-role="manager"] {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.17);
}
.signet-field-box:hover { box-shadow: 0 0 0 3px rgba(59, 158, 218, 0.20); }
.signet-field-box[data-role="manager"]:hover { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.20); }
.signet-field-box.is-dragging { cursor: grabbing; background: rgba(59, 158, 218, 0.30); }

/* The label sits ABOVE the box, not inside it: inside, a 16pt-tall date field has
   no room for it and the text spills over the document. */
.signet-field-tag {
  position: absolute;
  bottom: 100%;
  left: -1.5px;
  margin-bottom: 2px;
  padding: 1px 6px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .01em;
}
.signet-field-box[data-role="manager"] .signet-field-tag { background: #8b5cf6; }

.signet-field-x {
  position: absolute;
  top: -8px; right: -8px;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  line-height: 15px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.signet-field-box:hover .signet-field-x { opacity: 1; }

/* A page an every-page field has been turned OFF for. Drawn faded rather than
 * hidden, so there is something left to press to bring it back — hiding it
 * would mean undoing one mistaken press by un-ticking "every page" and starting
 * over. The + is always visible for the same reason: nothing hints that a
 * ghost is clickable. */
.signet-field-box.is-off {
  opacity: .38;
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.signet-field-box.is-off:hover { opacity: .72; }
.signet-field-x.is-add {
  opacity: 1;
  background: #047857;
  font-size: 12px;
  line-height: 16px;
}

/* Removing the whole field lives on the list row, because × on the page means
 * "not on this page" for an every-page field. */
.signet-field-row-x {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}
.signet-field-row:hover .signet-field-row-x { opacity: 1; }
.signet-field-row-x:hover { color: #991b1b; }

/* ── The footer ──────────────────────────────────────────────────────────── */
.signet-prep-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.signet-prep-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-line;
  flex: 1;
}
.signet-prep-hint.is-bad { color: #b91c1c; }

@media (max-width: 900px) {
  .signet-prep-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .signet-prep-rail { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* The "every page" tick on an initials field's row in the field list. Added
   2026-09-03 with per-page initials. It sits between the label and the page
   number, and it must not inherit the row's button cursor -- clicking the tick
   is a different action from clicking the row, which jumps to the page. */
.signet-field-every {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
}
.signet-field-every input { cursor: pointer; margin: 0; }