.sign-layout { display: grid; grid-template-columns: 330px 1fr; gap: 0; height: calc(100vh - var(--header-h)); }
@media (max-width: 860px) { .sign-layout { grid-template-columns: 1fr; height: auto; } }
.sign-side { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 20px; }
.sign-side h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 26px 0 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.sign-side h3:first-child { margin-top: 0; }
.sign-main { background: var(--canvas-bg); overflow-y: auto; padding: 24px; }
.doc-pages { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.doc-page { position: relative; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.12), 0 0 0 1px rgba(16,24,40,.04); width: 100%; max-width: 900px; }
.doc-page canvas { width: 100%; height: auto; display: block; }
.doc-page .fields { position: absolute; inset: 0; }
.doc-page .pnum { position: absolute; top: -17px; left: 0; font-size: 11px; color: var(--muted); }
.recipient { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-left: 3px solid var(--rc, var(--border)); border-radius: var(--radius); margin-bottom: 10px; cursor: pointer; background: var(--surface); }
.recipient input, .recipient select { height: 34px; }
.recipient.active { border-color: var(--border-strong); border-left-color: var(--rc); box-shadow: var(--shadow); background: var(--surface-2); }
.recipient .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 12px; }
.recipient .who { flex: 1; min-width: 0; }
.recipient .who div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient .order { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.palette button { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-2); cursor: grab; font: inherit; font-weight: 500; font-size: 13px; box-shadow: var(--shadow-sm); }
.palette button:hover { background: var(--surface-2); }
.palette button .i { color: var(--c, var(--accent)); }
.palette button:disabled { opacity: .45; cursor: not-allowed; }
.palette button.active { border-color: var(--c, var(--accent)); background: var(--accent-soft); color: var(--text); }
.sfield { position: absolute; border: 1.5px solid var(--c, #1d4ed8); background: color-mix(in srgb, var(--c, #1d4ed8) 14%, transparent); border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--c, #1d4ed8); cursor: move; user-select: none; overflow: hidden; container-type: size; }
.sfield .lbl { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: clamp(8px, 40cqh, 13px); }
.sfield.selected { box-shadow: 0 0 0 2px var(--c), 0 4px 12px rgba(0,0,0,.2); }
.sfield .rs { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; background: var(--c); cursor: nwse-resize; border-radius: 2px 0 3px 0; }
.sfield .del { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; border: 0; display: none; font-size: 12px; cursor: pointer; line-height: 1; }
.sfield.selected .del { display: block; }
.sfield.req::before { content: '*'; position: absolute; top: 0; left: 3px; font-size: 13px; }
/* signer */
.sfield.signer { cursor: pointer; animation: none; }
.sfield.signer.todo { animation: pulse 1.6s infinite; }
.sfield.signer.done { background: transparent; border-color: transparent; color: #0d1b5e; }
.sfield.signer.done:hover { border-color: var(--c); }
.sfield.signer img { max-width: 100%; max-height: 100%; }
.sfield.signer input[type=text] { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 3px; font: inherit; font-weight: 500; color: #0d1b5e; font-size: clamp(8px, 55cqh, 14px); }
.sfield.signer input[type=checkbox] { width: 70%; height: 70%; margin: 0; accent-color: #0d1b5e; }
.sfield.other { border-style: dashed; opacity: .9; cursor: default; background: transparent; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.signbar { position: sticky; top: var(--header-h); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.signbar .title { flex: 1; min-width: 200px; }
.signbar .title b { display: block; font-size: 15px; }
.signbar .title .muted { font-size: 13px; }
.progress { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; width: 140px; }
.progress div { height: 100%; background: var(--success); transition: width .3s; }
.banner { max-width: 900px; margin: 0 auto 26px; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; }
.banner.ok { border-color: transparent; background: var(--success-soft); color: var(--success); }
.banner.warn { border-color: transparent; background: var(--warning-soft); color: var(--warning); }
.auth-card { max-width: 420px; margin: 56px auto; padding: 32px; }
.auth-card h2 { font-size: 22px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stats .card { padding: 16px 18px; cursor: pointer; transition: border-color .12s; font: inherit; color: inherit; text-align: left; display: block; width: 100%; }
.stats .card:hover { border-color: var(--border-strong); }
.stats .muted { font-size: 13px; font-weight: 500; }
.stats .card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.stats b { font-size: 28px; font-weight: 600; display: block; letter-spacing: -.02em; margin-top: 4px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 10px 0 10px 18px; border-left: 2px solid var(--border); position: relative; font-size: 13px; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }

/* ---------- Responsive e-sign ---------- */
.prep-bar, .sheet-head, .sheet-scrim { display: none; }
.sfield, .sfield .rs { touch-action: none; }

@media (max-width: 860px) {
  .sign-layout { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - var(--header-h)); }
  .sign-main { padding: 14px 10px; }
  .doc-pages { gap: 14px; }
  .sign-layout:not(.prepare) .sign-side { border-right: 0; border-bottom: 1px solid var(--border); }

  /* Prepare: side panel becomes a sheet, bottom bar holds the field palette */
  .prepare .sign-main { padding-bottom: 96px; }
  .prepare .sign-side { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 82vh; border-right: 0; border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-lg); transform: translateY(105%); transition: transform .22s ease; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .prepare.sheet-open .sign-side { transform: none; }
  .prepare.sheet-open .sheet-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(16,24,40,.4); }
  .prepare .sheet-head { display: flex; align-items: center; justify-content: space-between; margin: -6px 0 6px; }
  .prepare .sign-side h3:nth-of-type(2), .prepare .sign-side h3:nth-of-type(2) + p, .prepare .sign-side .palette:not(.mobile) { display: none; }
  .prep-bar { display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; gap: 8px; align-items: center; padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(16,24,40,.08); }
  .prep-bar .palette.mobile { display: flex; flex: 1; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .prep-bar .palette.mobile button { flex: none; height: 38px; }
  .rchip { display: flex; align-items: center; gap: 6px; flex: none; max-width: 120px; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 99px;
    background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
  .rchip span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rchip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

  /* Signer page */
  .signbar { padding: 10px 12px; gap: 8px; }
  .signbar .title { flex-basis: 100%; min-width: 0; }
  .signbar .title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .signbar .progress { width: 70px; }
  .signbar .btn { height: 36px; padding: 0 12px; }
  .signbar > .btn.primary { margin-left: auto; }
  .banner { margin-bottom: 22px; }
  .sfield .lbl { font-size: clamp(7px, 38cqh, 12px); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .card:first-child { grid-column: span 2; }
  .stats b { font-size: 22px; }
}

.sfield .reqbtn { position: absolute; bottom: -22px; left: 0; display: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  font: 600 10.5px var(--font); border-radius: 99px; padding: 1px 8px; cursor: pointer; white-space: nowrap; z-index: 2; }
.sfield.selected { overflow: visible; }
.sfield.selected .reqbtn { display: block; }

/* Phones: filters become a compact scrolling row */
@media (max-width: 600px) {
  .stats { display: flex; overflow-x: auto; gap: 8px; margin: 0 -14px 14px; padding: 2px 14px 4px; scrollbar-width: none; }
  .stats::-webkit-scrollbar { display: none; }
  .stats .card, .stats .card:first-child { flex: none; width: auto; min-width: 112px; padding: 10px 14px; grid-column: auto; }
  .stats .muted { font-size: 12px; white-space: nowrap; }
  .stats b { font-size: 19px; margin-top: 0; }
}
/* Pages are drawn as they come near the screen (fields.js): show a spinner until then */
.doc-page:not(.drawn)::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.5px solid #e5e7e0; border-top-color: #f54e00; border-radius: 50%; animation: spin .7s linear infinite; }