/* eSignature product page (/esignature) — the page's own mock-ups. Shared layout is
   static/css/product.css (ADR-0088). Classes es-. */
.es-line { display: block; height: 6px; border-radius: 3px; background: #e6e9f1; margin: 7px 0; }
.es-line.w90 { width: 90%; } .es-line.w85 { width: 85%; } .es-line.w80 { width: 80%; } .es-line.w75 { width: 75%; }
.es-line.w70 { width: 70%; } .es-line.w60 { width: 60%; } .es-line.w50 { width: 50%; } .es-line.w40 { width: 40%; }

/* 1 — a page with fields */
.es-page { position: relative; width: 220px; height: 250px; background: #fff; border-radius: 6px; padding: 20px 18px; box-shadow: 0 14px 34px rgba(16, 24, 40, .12); }
.es-page-title { display: block; font-size: .8rem; margin-bottom: 10px; color: #1d2433; }
.es-fields { position: absolute; left: 18px; right: 18px; bottom: 22px; display: flex; gap: 8px; align-items: flex-end; }
.es-field { font-size: .66rem; font-weight: 700; border-radius: 4px; padding: 8px; border: 1.5px dashed; }
.es-field.sig { flex: 1.6; color: #0c64ae; border-color: #7aa7f0; background: rgba(12, 100, 174, .08); }
.es-field.date { flex: 1; color: #7c3aed; border-color: #c4b5fd; background: rgba(124, 58, 237, .07); }
.es-flag { position: absolute; left: -12px; bottom: 26px; background: #f5b400; color: #3d2a00; font-size: .62rem; font-weight: 800; padding: 4px 10px 4px 8px;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.pp-card.in .es-flag { animation: esBob 1.6s ease-in-out infinite; }
@keyframes esBob { 50% { transform: translateX(4px); } }

/* 2 — routing */
.es-route { width: 270px; display: grid; gap: 10px; }
.es-route-step { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
  font-size: .78rem; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * 160ms + .3s); }
.pp-card.in .es-route-step { opacity: 1; transform: none; }
.es-num { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 700; background: #eef1f6; color: #6b7487; }
.es-who { display: flex; flex-direction: column; min-width: 0; }
.es-who small { color: #8a93a4; font-size: .68rem; }
.es-st { margin-left: auto; font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #eef1f6; color: #6b7487; white-space: nowrap; }
.es-route-step.done .es-st { background: #dcfce7; color: #15803d; }
.es-route-step.done .es-num { background: #16a34a; color: #fff; }
.es-route-step.now { box-shadow: 0 0 0 2px #7aa7f0, 0 8px 22px rgba(12, 100, 174, .16); }
.es-route-step.now .es-st { background: #dbeafe; color: #0c64ae; }
.es-route-step.now .es-num { background: #0c64ae; color: #fff; }

/* 3 — signature pad */
.es-pad { width: 270px; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); }
.es-tabs { display: flex; gap: 4px; background: #f1f3f8; border-radius: 9px; padding: 3px; }
.es-tabs span { flex: 1; text-align: center; font-size: .72rem; padding: 6px 0; border-radius: 7px; color: #6b7487; }
.es-tabs span.on { background: #fff; color: #1d2433; font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.es-pad-area { position: relative; height: 90px; margin-top: 10px; border-radius: 8px; background: #fafbfd; border: 1px dashed #d8dce5; }
.es-pad-area svg { position: absolute; inset: 6px 8px 14px; width: calc(100% - 16px); height: calc(100% - 20px); }
.es-ink { fill: none; stroke: #1e3a8a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.pp-card.in .es-ink { animation: esInk 3.2s .5s ease-in-out infinite; }
@keyframes esInk { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.es-base { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 1px; background: #c9cfdb; }
.es-consent { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .7rem; color: #4b5568; }
.es-consent i { width: 15px; height: 15px; border-radius: 4px; background: #0c64ae; color: #fff; display: grid; place-items: center; font-size: .55rem; }

/* 4 — template stack */
.es-stack { position: relative; width: 250px; height: 210px; }
.es-tpl { position: absolute; left: 0; right: 0; top: calc(var(--i) * 34px + 10px); display: flex; gap: 12px; align-items: center; padding: 16px 14px 46px;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 26px rgba(16, 24, 40, .1); font-size: .8rem; transition: transform .5s; }
.es-tpl i { font-size: 1.4rem; --fa-primary-color: #0c64ae; --fa-secondary-color: #7c3aed; }
.es-tpl span { display: flex; flex-direction: column; }
.es-tpl small { color: #8a93a4; font-size: .68rem; }
.pp-card:hover .es-tpl { transform: translateY(calc((var(--i) - 1) * 8px)); }
.es-count { position: absolute; right: -8px; bottom: -6px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, #0c64ae, #5b5bd6); color: #fff;
  font-size: .78rem; box-shadow: 0 8px 20px rgba(76, 90, 214, .35); }

/* 5 — certificate */
.es-cert { width: 270px; background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .74rem;
  border-top: 4px solid #16a34a; }
.es-cert-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid #eef0f4; font-size: .82rem; }
.es-cert-head i { color: #16a34a; --fa-primary-color: #16a34a; --fa-secondary-color: #16a34a; font-size: 1.1rem; }
.es-cert-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; color: #4b5568; opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i) * 120ms + .3s); }
.es-cert-row span:last-child { color: #8a93a4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-card.in .es-cert-row { opacity: 1; }

/* 6 — filed */
.es-file { display: flex; align-items: center; gap: 10px; }
.es-doc { width: 74px; height: 92px; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(16, 24, 40, .12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.es-doc i { font-size: 1.8rem; color: #dc2626; --fa-primary-color: #dc2626; --fa-secondary-color: #dc2626; }
.es-doc small { font-size: .62rem; color: #6b7487; }
.pp-card.in .es-doc { animation: esSlide 2.8s ease-in-out infinite; }
@keyframes esSlide { 0%, 20% { transform: none; opacity: 1; } 60% { transform: translateX(70px) scale(.6); opacity: 0; } 61% { transform: none; opacity: 0; } 80%, 100% { opacity: 1; } }
.es-arrow { width: 54px; height: 28px; }
.es-arrow path { fill: none; stroke: #b8c2d6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.es-folder { width: 120px; padding: 16px 10px; border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(16, 24, 40, .12); display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .76rem; }
.es-folder i { font-size: 2rem; --fa-primary-color: #f59e0b; --fa-secondary-color: #fbbf24; color: #f59e0b; }
.es-folder small { color: #8a93a4; font-size: .66rem; }

/* ---- the walkthrough scenes ---- */
.es-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border: 2px dashed #c9d3e6; border-radius: 14px; background: #f8faff; color: #4b5568; text-align: center; }
.es-drop i { font-size: 2rem; --fa-primary-color: #0c64ae; --fa-secondary-color: #7aa7f0; color: #0c64ae; }
.es-drop small { color: #8a93a4; }
.es-chosen { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid #e3e7ee; border-radius: 12px; }
.es-chosen > i:first-child { font-size: 1.5rem; color: #dc2626; --fa-primary-color: #dc2626; --fa-secondary-color: #dc2626; }
.es-chosen span { display: flex; flex-direction: column; min-width: 0; }
.es-chosen b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-chosen small { color: #8a93a4; }
.es-chosen .ok { margin-left: auto; color: #16a34a; }
.pp-scene.on .es-chosen { animation: ppRow .5s .6s both; }

.es-recips { display: grid; gap: 10px; }
.es-recip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid #e3e7ee; border-left: 4px solid var(--c); }
.es-recip span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.es-recip small { color: #8a93a4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-role { margin-left: auto; font-size: .7rem; font-weight: 600; color: #6b7487; background: #f1f3f8; padding: 3px 9px; border-radius: 999px; }
.pp-scene.on .es-recip { animation: ppRow .45s both; animation-delay: calc(var(--i) * 140ms); }
.es-toggle { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .84rem; color: #4b5568; }
.es-toggle span { width: 36px; height: 20px; border-radius: 999px; background: #0c64ae; position: relative; }
.es-toggle span::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

.es-editor { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; }
.es-editor-page { position: relative; height: 280px; border-radius: 8px; background: #fbfcfe; border: 1px solid #e3e7ee; padding: 18px; }
.es-drop-field { position: absolute; font-size: .68rem; font-weight: 700; color: var(--c); border: 1.5px dashed var(--c); border-radius: 5px; padding: 8px 10px;
  background: color-mix(in srgb, var(--c) 8%, #fff); white-space: nowrap; }
.es-drop-field.f1 { left: 18px; bottom: 70px; } .es-drop-field.f2 { right: 18px; bottom: 70px; } .es-drop-field.f3 { left: 18px; bottom: 20px; }
.pp-scene.on .es-drop-field { animation: esDropIn .55s both cubic-bezier(.2, 1.4, .4, 1); }
.pp-scene.on .es-drop-field.f2 { animation-delay: .5s; } .pp-scene.on .es-drop-field.f3 { animation-delay: 1s; }
@keyframes esDropIn { from { opacity: 0; transform: translate(60px, -40px) scale(.8); } to { opacity: 1; transform: none; } }
.es-palette { display: grid; gap: 8px; }
.es-palette span { font-size: .72rem; font-weight: 600; padding: 8px 12px; border-radius: 8px; background: #f1f3f8; color: #4b5568; }

.es-track-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.es-track-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-pill { flex: none; font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff7e6; color: #92600a; }
.es-progress { height: 6px; border-radius: 3px; background: #eef1f6; margin: 14px 0 10px; overflow: hidden; }
.es-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #16a34a, #0c64ae); border-radius: 3px; }
.pp-scene.on .es-progress span { animation: esFill 1.4s .2s both ease-out; }
@keyframes esFill { to { width: 50%; } }
.es-track-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f2f3f7; color: #6b7487; }
.es-track-row small { margin-left: auto; color: #a0a8b6; }
.es-track-row.done { color: #1d2433; } .es-track-row.done i { color: #16a34a; }
.es-track-row.now { color: #1d2433; font-weight: 600; } .es-track-row.now i { color: #0c64ae; }
.es-track-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.es-track-actions .pp-fake-btn { margin-top: 14px; }
.es-ghost { margin-top: 14px; padding: 10px 16px; border-radius: 10px; border: 1px solid #d8dce5; color: #4b5568; font-weight: 600; }

/* ---- templates gallery ---- */
.es-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 600; color: #0c64ae; }
.es-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.es-g { background: #fff; border-radius: 14px; padding: 18px 16px 16px; box-shadow: 0 10px 26px rgba(16, 24, 40, .08); border-top: 4px solid var(--c);
  font-size: .82rem; transition: transform .3s; }
.es-g:nth-child(even) { transform: translateY(18px); }
.es-g:hover { transform: translateY(-4px); }
.es-g i { display: block; font-size: 1.5rem; margin-bottom: 10px; color: var(--c); --fa-primary-color: var(--c); --fa-secondary-color: var(--c); }
.es-g b { display: block; min-height: 2.5em; line-height: 1.25; margin-bottom: 6px; color: #1d2433; }

@media (max-width: 640px) {
  .es-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-editor { grid-template-columns: minmax(0, 1fr); }
  .es-palette { grid-template-columns: repeat(4, auto); justify-content: start; }
  .es-palette span { padding: 6px 8px; }
  .es-editor-page { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .es-route-step, .es-cert-row { opacity: 1 !important; transform: none !important; transition: none !important; }
  .es-ink { stroke-dashoffset: 0; animation: none !important; }
  .es-flag, .es-doc { animation: none !important; }
}