/* js/signpost/sign-app.css - the client's signing screens (sign-app.js).
 *
 * Phone first (iPhone is the pilot device): one column, every control at least
 * 44px tall, respects the notch and home bar (safe-area insets), and follows the
 * phone's light/dark setting. The field panel is pinned to the bottom so the
 * signer's thumb is always where the next action is.
 */

.sp-app {
  --sp-navy: #1a2a44;
  --sp-gold: #b89548;
  --sp-bg: #f0f2f5;
  --sp-card: #ffffff;
  --sp-text: #1a2a44;
  --sp-muted: #5a6a7e;
  --sp-line: #dee2e6;
  --sp-primary: #1a2a44;
  --sp-primary-text: #ffffff;
  --sp-box: rgba(184, 149, 72, 0.16);
  --sp-box-edge: #b89548;
  --sp-done: #1f8a4c;
  --sp-danger: #c0392b;
  --sp-pad-bg: #ffffff;
  --sp-radius: 14px;
  --sp-panel-h: 42vh;

  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sp-bg);
  color: var(--sp-text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'DM Sans', 'Segoe UI', Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
  .sp-app {
    --sp-bg: #0f1623;
    --sp-card: #18212f;
    --sp-text: #e8edf4;
    --sp-muted: #9aa8ba;
    --sp-line: #2c3a4e;
    --sp-primary: #d4af6a;
    --sp-primary-text: #111a28;
    --sp-box: rgba(212, 175, 106, 0.22);
    --sp-box-edge: #d4af6a;
    --sp-done: #3ccf7a;
    --sp-danger: #ff6b5b;
  }
}
.sp-app *, .sp-app *::before, .sp-app *::after { box-sizing: border-box; }
.sp-app h1 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .6rem; }
.sp-app h2 { font-size: 1.15rem; margin: 0; }
.sp-app p { margin: 0 0 .8rem; }

/* ── header ─────────────────────────────────────────────── */
.sp-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px calc(env(safe-area-inset-left) + 16px);
  background: #0f1c30; color: #fff;
}
.sp-title { flex: 1; min-width: 0; }
.sp-doc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-from { font-size: .8rem; color: #d4af6a; }
.sp-menu {
  min-width: 44px; min-height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer;
}
.sp-menu:focus-visible { outline: 2px solid #d4af6a; }

/* ── main + cards ───────────────────────────────────────── */
.sp-main { outline: none; padding: 16px 16px calc(env(safe-area-inset-bottom) + 24px); max-width: 720px; margin: 0 auto; }
.sp-app[data-screen="document"] .sp-main { padding: 0 0 calc(var(--sp-panel-h) + env(safe-area-inset-bottom)); max-width: none; }
.sp-card { background: var(--sp-card); border-radius: var(--sp-radius); padding: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.sp-center { text-align: center; }
.sp-muted { color: var(--sp-muted); font-size: .92rem; }
.sp-pad { padding: 16px; }
.sp-big-icon { font-size: 3rem; margin-bottom: 8px; }
.sp-spinner {
  width: 36px; height: 36px; margin: 12px auto 16px; border-radius: 50%;
  border: 3px solid var(--sp-line); border-top-color: var(--sp-primary);
  animation: sp-spin .8s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-spinner { animation-duration: 3s; } }

/* ── buttons ────────────────────────────────────────────── */
.sp-primary, .sp-secondary, .sp-danger, .sp-link {
  display: block; width: 100%; min-height: 48px; margin-top: 10px;
  border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer;
  touch-action: manipulation;
}
.sp-primary { border: 0; background: var(--sp-primary); color: var(--sp-primary-text); }
.sp-secondary { border: 1px solid var(--sp-line); background: var(--sp-card); color: var(--sp-text); }
.sp-danger { border: 0; background: var(--sp-danger); color: #fff; }
.sp-link { border: 0; background: transparent; color: var(--sp-muted); text-decoration: underline; font-weight: 500; }
.sp-primary:disabled, .sp-secondary:disabled, .sp-danger:disabled { opacity: .45; cursor: default; }
.sp-app button:focus-visible, .sp-app input:focus-visible, .sp-app textarea:focus-visible { outline: 3px solid var(--sp-box-edge); outline-offset: 2px; }
.sp-sign-here { min-height: 56px; font-size: 1.05rem; }
.sp-sign { min-height: 56px; font-size: 1.1rem; }

/* ── consent checkbox ───────────────────────────────────── */
.sp-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.sp-check input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--sp-primary); }

/* ── the document ───────────────────────────────────────── */
html:has(.sp-app[data-screen="document"]) { scroll-padding-bottom: var(--sp-panel-h, 42vh); scroll-padding-top: 64px; }
.sp-pages { display: flex; flex-direction: column; gap: 10px; padding: 10px 8px; }
.sp-page {
  position: relative; width: 100%; max-width: 900px; margin: 0 auto;
  background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}
/* The page's words for screen readers (viewer.js readableText): out of sight, still read. */
.sp-page-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: normal; border: 0; }
.sp-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-overlay { position: absolute; inset: 0; }
/* DRAFT across every page of a review the realtor marked (review-app.js).
   Never used on the signing screen. Sized from the page's own width. */
.sp-draft-marked .sp-page { container-type: inline-size; }
.sp-draft-marked .sp-page::after {
  content: 'DRAFT'; position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%) rotate(-52deg);
  font: 800 24cqw/1 Helvetica, Arial, sans-serif; letter-spacing: .04em;
  color: rgba(179, 31, 31, .18); white-space: nowrap; pointer-events: none;
}
.sp-box {
  position: absolute; padding: 0; margin: 0;
  border: 1.5px dashed var(--sp-box-edge); border-radius: 3px;
  background: var(--sp-box); cursor: pointer;
  display: flex; align-items: flex-end; justify-content: flex-start;
  touch-action: manipulation;
}
.sp-box.is-current { border-style: solid; border-width: 2px; box-shadow: 0 0 0 3px rgba(184, 149, 72, .35); }
.sp-box.is-done { border-style: solid; border-color: var(--sp-done); background: rgba(31, 138, 76, .08); }
/* "Date signed": filled in by the server when the signer finishes; not tappable to edit. */
.sp-box.is-auto { border-style: dotted; border-color: #8a94a6; background: rgba(138, 148, 166, .12); cursor: default; }
.sp-box.is-auto .sp-face { color: #5a6a7e; font-style: italic; }
/* The tap target is larger than the drawn box, centred on it. */
.sp-hit { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); }
.sp-face {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: flex; align-items: flex-end; padding: 0 2px;
  color: #1a2a44; font-size: clamp(8px, 2.2vw, 14px); line-height: 1.1; white-space: nowrap;
  pointer-events: none;
}
.sp-face img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: left bottom; }

/* ── the field panel (pinned, thumb reach) ──────────────── */
.sp-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  max-height: var(--sp-panel-h); overflow-y: auto;
  padding: 12px calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 16px);
  background: var(--sp-card); border-top: 1px solid var(--sp-line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
  border-radius: var(--sp-radius) var(--sp-radius) 0 0;
}
.sp-app[data-step="consent"] { --sp-panel-h: 58vh; }
.sp-panel h2 { margin-bottom: 6px; }
.sp-panel .sp-muted { font-size: .85rem; }
.sp-progress { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; }
.sp-bar { height: 6px; border-radius: 3px; background: var(--sp-line); margin: 6px 0 10px; overflow: hidden; }
.sp-bar > div { height: 100%; background: var(--sp-done); transition: width .25s; }
.sp-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.sp-field input, .sp-app textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--sp-line); border-radius: 10px;
  background: var(--sp-pad-bg); color: #1a2a44;
  font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
}
.sp-error { color: var(--sp-danger); font-size: .88rem; min-height: 1.2em; margin-top: 4px; }
/* iOS Safari gives date inputs an intrinsic width wider than a phone column,
   so the box ran off the right edge. Take the native styling off and let it
   fill the column like every other field. */
.sp-field input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%; text-align: left;
}
.sp-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.sp-note { font-size: .85rem; margin: 8px 0 0; }
.sp-stamp { font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-nav { display: flex; gap: 10px; }
.sp-nav > button { flex: 1; }
.sp-mark-preview { display: block; max-width: 100%; max-height: 70px; margin: 6px 0; background: #fff; border-radius: 6px; padding: 4px; }
.sp-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 10px 12px; border: 1px solid var(--sp-line); border-radius: 12px;
  background: var(--sp-card); color: var(--sp-text); font: inherit; text-align: left; cursor: pointer;
}
.sp-toggle-box {
  width: 28px; height: 28px; flex: none; border: 2px solid var(--sp-box-edge); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.sp-toggle.is-on .sp-toggle-box { background: var(--sp-done); border-color: var(--sp-done); color: #fff; }

/* ── bottom sheets (adopt, menu, decline) ───────────────── */
.sp-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .45); }
.sp-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  max-height: 92vh; overflow-y: auto; max-width: 640px; margin: 0 auto;
  padding: 16px calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
  background: var(--sp-card); color: var(--sp-text);
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .25);
}
.sp-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sp-close { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--sp-text); font-size: 1.2rem; cursor: pointer; }
.sp-tabs { display: flex; gap: 4px; padding: 4px; background: var(--sp-bg); border-radius: 12px; margin-bottom: 12px; }
.sp-tabs button {
  flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent;
  color: var(--sp-muted); font: inherit; font-weight: 600; cursor: pointer;
}
.sp-tabs button[aria-selected="true"] { background: var(--sp-card); color: var(--sp-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
/* The drawing pad stays white in dark mode: ink is navy, like paper. */
.sp-pad {
  display: block; width: 100%; height: 180px; padding: 0;
  background: #fff; border: 1px solid var(--sp-line); border-radius: 12px;
  touch-action: none; cursor: crosshair;
  background-image: linear-gradient(to right, #c8ced6, #c8ced6);
  background-size: calc(100% - 32px) 1px; background-position: 16px 75%; background-repeat: no-repeat;
}
.sp-row { display: flex; gap: 10px; }
.sp-row > button { flex: 1; }
.sp-styles { display: flex; flex-direction: column; gap: 8px; }
.sp-style {
  min-height: 72px; padding: 8px 12px; border: 2px solid var(--sp-line); border-radius: 12px;
  background: #fff; color: #1a2a44; cursor: pointer; display: flex; align-items: center;
}
.sp-style[aria-checked="true"] { border-color: var(--sp-box-edge); box-shadow: 0 0 0 3px rgba(184, 149, 72, .3); }
.sp-style img { max-height: 56px; max-width: 100%; }

/* ── review ─────────────────────────────────────────────── */
.sp-review { list-style: none; padding: 0; margin: 0 0 8px; }
.sp-review li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--sp-line);
}
.sp-review li > :not(.sp-link) { grid-column: 1; }
.sp-review .sp-link { grid-column: 2; grid-row: 1 / span 2; width: auto; min-width: 64px; min-height: 44px; margin: 0; padding: 0 4px; }

/* ── toast ──────────────────────────────────────────────── */
.sp-toast {
  position: fixed; left: 16px; right: 16px; z-index: 40;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  max-width: 560px; margin: 0 auto; padding: 14px 16px; border-radius: 12px;
  background: #1a2a44; color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}

/* ── the client review of a draft (review-app.js) ──────────── */
.sp-app[data-mode="review"] { --sp-panel-h: 30vh; }
.sp-app[data-mode="review"][data-step="changes"] { --sp-panel-h: 52vh; }
/* The realtor's typed values read as printed on the page, not as boxes to fill. */
.sp-app[data-mode="review"] .sp-box.is-done { border-color: transparent; background: rgba(26, 42, 68, .05); }
/* Signing spots: dashed in the party's colour, labelled with who signs. */
.sp-app[data-mode="review"] .sp-box:not(.is-done):not(.is-auto) { border-color: var(--sp-party, var(--sp-box-edge)); }
.sp-app[data-mode="review"] .sp-box:not(.is-done):not(.is-auto) .sp-face { color: var(--sp-party, #5a6a7e); font-style: italic; }
.sp-app[data-mode="review"][data-step] .sp-toast { top: calc(env(safe-area-inset-top) + 64px); bottom: auto; }
.sp-rv-callout { background: rgba(184, 149, 72, .14); border-left: 4px solid var(--sp-gold); padding: 10px 12px; border-radius: 8px; }
.sp-rv-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sp-rv-label { display: block; font-weight: 600; margin: 8px 0 6px; }
.sp-rv-count { text-align: right; font-size: .8rem; margin-top: 4px; }
.sp-rv-quote { white-space: pre-wrap; text-align: left; background: var(--sp-bg); border-radius: 10px; padding: 12px; }

/* ── the consent agreement (signing.js CONSENT_VERSION 2026-10-v2) ── */
.sp-consent-terms { margin: 0 0 .8rem; padding-left: 1.2rem; font-size: .92rem; line-height: 1.45; }
.sp-consent-terms li { margin-bottom: .5rem; }
.sp-consent-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 8px; }