/* ==========================================================================
   THE AGENT'S SIGNATURE PANEL.  (txn_esign)

   Paired with esign.js. Its own file because styles.css is written by several
   sessions at once and a separate file has no collision window.
   STAGING ONLY -- not present in outputs/theboundarystone/.

   ⚠⚠ THIS PANEL LOADS INSIDE THE AGENT APP, so styles.css IS present and its
   global grouped rule -- `input, select, textarea { width: 100%;
   padding: 12px 13px; background: var(--white); border-radius: 8px }` -- applies
   to every field here. Unlike sign.html, which sidesteps the whole problem by
   not loading styles.css at all, this one has to override deliberately. The
   .es-in rules below are that override. CLAUDE.md records this costing hours
   once, and notes the selector is a grouped multi-line one, so grepping for the
   checkbox type does not find it -- grep for a line beginning "input,".
   ========================================================================== */

#esignHost { display: none; }
#esignHost.is-open { display: block; }

.es-shade {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.58);
  z-index: 4100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
}

.es-panel {
  background: #fff;
  border-radius: 12px;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(10, 22, 40, 0.35);
}

.es-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e3e8ef;
}
.es-head h2 { margin: 0 0 3px; font-size: 1.05rem; color: #14243d; }
.es-sub { margin: 0; font-size: 0.78rem; color: #5a6b83; }

.es-close, .es-add, .es-quiet, .es-drop, .es-primary {
  width: auto;
  min-width: 0;
}
.es-close {
  padding: 7px 14px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  color: #14243d;
  cursor: pointer;
}

.es-notice {
  margin: 0;
  padding: 10px 20px;
  font-size: 0.85rem;
  background: #fdf5e4;
  color: #6b4a12;
  border-bottom: 1px solid #efe1c2;
}

.es-body { overflow: auto; padding: 16px 20px 20px; }
.es-body h3 { margin: 0 0 10px; font-size: 0.86rem; color: #14243d; }

/* ⚠ See the header: the global input rule would make these full-width padded
   slabs and the role select unusable beside the name and email. */
.es-in {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
}
.es-role { width: auto; min-width: 140px; }

.es-new { margin-bottom: 22px; }
.es-signer-list { margin: 12px 0 8px; display: grid; gap: 8px; }
.es-signer {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr auto auto;
  gap: 8px;
  align-items: center;
}
.es-drop {
  padding: 6px 10px;
  border: 1px solid #e0c8c8;
  border-radius: 8px;
  background: #fff;
  color: #8a1c1c;
  cursor: pointer;
  line-height: 1;
}
.es-add {
  margin-top: 2px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.86rem;
}
.es-new-actions { margin-top: 14px; }

.es-primary {
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: #14243d;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
}
.es-primary[disabled] { opacity: 0.45; cursor: not-allowed; }

.es-quiet {
  padding: 8px 0;
  border: 0;
  background: none;
  color: #5a6b83;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.86rem;
}

/* ---- issued links, shown once ------------------------------------------- */

.es-issued { border: 1px solid #efe1c2; border-radius: 10px; padding: 14px; background: #fffdf7; }
/* ⚠ The warning is prominent on purpose. Only a digest of each token is stored,
   so these cannot be produced again by anyone. */
.es-warn { margin: 0 0 12px; font-size: 0.85rem; color: #6b4a12; }
.es-link-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 1.6fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #efe1c2;
  font-size: 0.86rem;
}
.es-email { color: #5a6b83; font-size: 0.8rem; }
.es-link {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #c8d2e0;
  border-radius: 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  background: #fff;
}

/* ---- existing requests --------------------------------------------------- */

.es-list { border-top: 1px solid #e3e8ef; padding-top: 16px; }

.es-env {
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.es-env-completed { background: #f7fcf9; border-color: #cfe6d8; }
.es-env-voided, .es-env-declined { background: #fafbfc; color: #5a6b83; }

.es-env-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.es-env-head strong { color: #14243d; font-size: 0.92rem; }
.es-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6b83;
  border: 1px solid #d9e0ea;
  border-radius: 999px;
  padding: 2px 9px;
}
.es-env-file { margin: 2px 0 8px; font-size: 0.76rem; color: #7c8aa0; }
.es-void { margin: 0 0 8px; font-size: 0.8rem; color: #8a1c1c; }

.es-signers { margin: 0 0 10px; padding: 0 0 0 18px; font-size: 0.85rem; }
.es-signers li { margin: 0 0 3px; }
.es-role-tag { color: #7c8aa0; font-size: 0.76rem; }
.es-ok { color: #1c7a44; }
.es-no { color: #8a1c1c; }
.es-mid { color: #5a6b83; }

.es-env-actions { margin-top: 4px; }
.es-done-note { font-size: 0.82rem; color: #1c5132; }

.es-empty, .es-loading { padding: 20px 0; color: #5a6b83; font-size: 0.88rem; }
.es-fail { padding: 12px 0; color: #8a1c1c; font-size: 0.88rem; }

/* The launcher app.js renders beside the TREC fill button. */
.txn-doc-esign {
  width: auto;
  min-width: 0;
  padding: 8px 16px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  color: #14243d;
  cursor: pointer;
}
[data-txn-doc-readonly] .txn-doc-esign { display: none; }

@media (max-width: 640px) {
  .es-signer { grid-template-columns: 1fr; }
  .es-link-row { grid-template-columns: 1fr; }
}

/* The outcome of the automatic email, above the links. Both states are shown:
   "emailed" is not a reason to hide the links, because nothing can re-send
   them and the agent may still need to pass one on another way. */
.es-mail { margin: 0 0 12px; font-size: 0.85rem; padding: 8px 10px; border-radius: 6px; }
.es-mail.is-ok { background: #eaf6ee; color: #1c5132; }
.es-mail.is-bad { background: #fdecec; color: #8a1c1c; }

/* ==========================================================================
   Signing in order (2026-09-17). Buyer signs, then it goes to the other side.

   ⚠⚠ EVERY CONTROL HERE NEEDS AN EXPLICIT SIZE, and the radios most of all.
   styles.css carries a GLOBAL grouped rule beginning "input," that gives every
   input width:100% and 12px padding -- which turns a radio button into a
   full-width white box with the dot floating in it and the label shoved to the
   far right. CLAUDE.md records this costing hours, and notes that grepping for
   the checkbox type does not find the selector.
   ========================================================================== */

.es-routing {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #f7f9fc;
}
.es-routing label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 18px;
  font-size: 0.9rem;
  color: #14243d;
  cursor: pointer;
}
.es-routing input[type="radio"] {
  width: 15px;
  min-width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: none;
  accent-color: #1c7a44;
}
.es-routing-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #5a6b83;
  line-height: 1.45;
}

/* The order box only exists in sequential mode, and so does its column. */
.es-signer-ordered { grid-template-columns: 4.2rem 1.1fr 1.3fr auto auto; }
.es-order {
  width: 100%;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

/* A party whose turn has not come has no link to show -- said plainly where a
   link box would otherwise sit, so the row does not read as a missing value. */
.es-link-later {
  font-size: 0.82rem;
  color: #5a6b83;
  font-style: italic;
  align-self: center;
}

.es-routing-state {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: #1c5132;
}

/* ==========================================================================
   Sending a COPY to somebody outside the deal (2026-09-17) -- the agent on the
   other side, title, a lender.

   ⚠⚠ IT MUST NOT LOOK LIKE THE SIGNATURE BOX. Choosing the wrong one of these
   two is the kind of mistake that ends up in front of a broker, so this section
   is visually quieter and its button is secondary: sending a copy is the
   smaller act and should not be the louder control.
   ========================================================================== */

.es-share-new {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e3e9f2;
}
.es-sub-note {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: #5a6b83;
  line-height: 1.45;
}
/* Three controls here, not four: there is no remove button on a single
   recipient row, and a grid whose template outruns its children leaves a hole. */
.es-share-new .es-signer { grid-template-columns: 1.1fr 1.3fr auto; }
.es-share-msg { margin-top: 8px; }

.es-secondary {
  padding: 10px 18px;
  border: 1px solid #14243d;
  border-radius: 8px;
  background: #fff;
  color: #14243d;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.es-secondary:hover { background: #f2f5fa; }
.es-secondary[disabled] { opacity: 0.55; cursor: default; }

.es-share {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #e3e9f2;
  border-radius: 9px;
  background: #fff;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Prefill + the optional message (2026-09-18).
   Matt, after filing a form: "I figured it would come up with a question for
   who do you represent, what are their names and email addresses... Click this
   button to send it or if you want to customize it, use this button to write
   your own custom email."
   ⚠ EXPLICIT SIZING ON THE TEXTAREA. styles.css carries a GLOBAL grouped rule
   beginning "input," that also hits textarea; without a width here it is fine,
   but the padding and font come from that rule and would not match .es-in. */
.es-prefill-note {
  margin: 10px 0 2px;
  font-size: 0.82rem;
  color: #5a6b83;
  line-height: 1.45;
}
.es-note {
  width: 100%;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  resize: vertical;
}

/* ==========================================================================
   ONE EMAIL, SEVERAL DOCUMENTS, AND A GRID SAYING WHO SIGNS WHAT.
   Matt, 2026-09-18: "It will be too easy to lose docs if they get 5 emails each
   with their own doc", and "Not everyone signs everything."

   ⚠⚠ EVERY CHECKBOX BELOW CARRIES AN EXPLICIT SIZE, and that is not styling.
   styles.css has a GLOBAL grouped rule -- `input, select, textarea { width:
   100%; padding: 12px 13px; background: var(--white) }` -- which hits checkboxes
   too and renders them as full-width padded white boxes with the tick floating
   mid-row and the label shoved to the far right. CLAUDE.md records this costing
   hours, and records that grepping for the checkbox type does not find the
   selector. Do not delete these five declarations.
   ========================================================================== */

.es-doc-lead {
  margin: 0 0 6px;
  font-size: 0.88rem;
  color: #14243d;
}
.es-doc-picker {
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
  max-height: 210px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
}
.es-doc-pick {
  display: grid;
  grid-template-columns: 16px 1.6rem 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 0.88rem;
  color: #14243d;
  cursor: pointer;
}
.es-doc-pick:hover { background: #f2f6fb; }
.es-doc-pick.is-on { background: #eef6f1; }
.es-doc-pick input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  background: none;
  accent-color: #1c7a44;
}
/* The reading order, not a bullet: this is the order they arrive in. */
.es-doc-num {
  display: inline-block;
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #5a6b83;
}
.es-doc-pick.is-on .es-doc-num { color: #1c5132; }
.es-doc-when {
  display: block;
  font-size: 0.76rem;
  color: #5a6b83;
}
.es-doc-count {
  margin: 0 0 4px;
  font-size: 0.82rem;
  color: #1c5132;
}

/* ⚠ THE TABLE SCROLLS INSIDE ITS OWN BOX. Five documents across a panel column
   is wider than the panel, and a body that scrolls sideways hides the send
   button off the edge of the screen. */
.es-grid-wrap {
  margin: 10px 0 2px;
  overflow-x: auto;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
}
.es-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}
.es-grid caption {
  caption-side: top;
  text-align: left;
  padding: 8px 10px 6px;
  font-size: 0.82rem;
  color: #5a6b83;
  line-height: 1.45;
}
.es-grid th,
.es-grid td {
  padding: 7px 9px;
  border-top: 1px solid #edf1f7;
  text-align: center;
  vertical-align: middle;
}
.es-grid thead th {
  border-top: 0;
  font-size: 0.78rem;
  color: #14243d;
  white-space: nowrap;
}
.es-grid tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: #14243d;
  white-space: nowrap;
}
.es-grid-n {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a6b83;
}
.es-grid input[type="checkbox"] {
  width: 17px;
  min-width: 17px;
  height: 17px;
  padding: 0;
  margin: 0;
  background: none;
  accent-color: #1c7a44;
  cursor: pointer;
}

/* "signs 2 of 3" on the issued-links list, so an agent can see the grid was
   honoured without reopening the request. */
.es-signs-tag {
  font-size: 0.76rem;
  color: #1c5132;
  background: #eef6f1;
  border-radius: 999px;
  padding: 1px 8px;
}

/* ==========================================================================
   THE EXECUTED COPY GOES OUT ON ITS OWN. "then send copy to title and other
   agent so it goes unilateral" (Matt, 2026-09-18). Its own bordered block so a
   recipient here cannot be mistaken for somebody being asked to sign.
   ========================================================================== */

.es-copies {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 1px dashed #dbe3ee;
  border-radius: 8px;
  background: #fbfcfe;
}
.es-copies-lead {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: #14243d;
}
.es-copies-note {
  margin: 6px 0 8px;
  font-size: 0.8rem;
  color: #5a6b83;
  line-height: 1.45;
}
/* Three columns: this row has no signing order, because nobody here signs. */
.es-copy-row { grid-template-columns: 1.1fr 1.3fr auto auto; }

/* Every document in a packet, on the request's own card. */
.es-env-docs {
  margin: 2px 0 8px;
  padding-left: 18px;
  font-size: 0.85rem;
  color: #14243d;
  line-height: 1.5;
}
.es-env-copies {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: #5a6b83;
  line-height: 1.45;
}