/* ==========================================================================
   Sign a PDF
   Two columns: the page on the left, the signature pad and controls on the
   right. One column on a phone, with the page first — you need to see where
   the signature is going before you care about the slider.

   The page fills the space it is given rather than sitting at a fixed size in
   the middle of an empty column, because placing a signature accurately means
   seeing where it lands. The two columns are the same height, so the hint can
   sit on the floor of the left one, level with the last button on the right.
   ========================================================================== */

.sign-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:26px;align-items:stretch;
}
@media (max-width:900px){
  .sign-layout{grid-template-columns:1fr;gap:20px;}
}

.sign-stage{display:flex;flex-direction:column;gap:12px;min-height:0;}

/* The window the page sits in, which centres it. margin:auto on the child
   rather than place-items:center: if a page ever does overflow this box,
   centring an overflowing flex item clips the top and leaves no way to
   scroll back up to it. */
.sign-view{
  /* Tall enough that an A4 page is worth looking at: the page fits by height,
     so the height of this box is what decides how big the document is. 420px
     left it as a postage stamp in a very wide grey box. */
  flex:1;min-height:max(420px, min(76vh, 780px));overflow:auto;
  display:flex;padding:14px;
  background:var(--surface-2);
  border:1px solid var(--rule);border-radius:var(--radius-sm);
}
@media (max-width:900px){
  .sign-view{min-height:360px;padding:10px;}
}

/* Sized in script to fit the window, so the signature overlay can be held as
   a fraction of it and stay put through a page turn or a window resize. */
.sign-page{
  position:relative;margin:auto;flex:none;
  background:#fff;box-shadow:var(--shadow);
  border:1px solid var(--rule);border-radius:2px;
}
.sign-page img#pageImg{display:block;width:100%;height:100%;border-radius:2px;}

.sign-mark{
  position:absolute;cursor:grab;touch-action:none;
  border:1px dashed transparent;border-radius:3px;
}
.sign-mark:hover,.sign-mark:focus-within{border-color:var(--accent);}
.sign-mark:active{cursor:grabbing;}
.sign-mark img{display:block;width:100%;height:100%;pointer-events:none;}

.sign-bar{display:flex;align-items:center;justify-content:center;}
.sign-pager{display:flex;align-items:center;gap:10px;}
.sign-bar .mono{
  font-family:var(--f-mono);font-size:.84rem;color:var(--ink-3);
  min-width:5.5em;text-align:center;
}
/* On the floor of the column, level with the last control on the right. */
.sign-hint{
  margin:auto 0 0;padding-top:6px;
  font-size:.84rem;color:var(--ink-3);text-align:center;line-height:1.5;
}

.sign-side{display:flex;flex-direction:column;gap:18px;}

/* The pad is a fixed 600x220 bitmap shown at whatever width the column has.
   The aspect ratio is pinned so the drawing never stretches. */
.sign-pad-wrap{position:relative;}
.sign-pad-wrap canvas{
  display:block;width:100%;aspect-ratio:600/220;
  background:var(--surface);
  border:1px dashed var(--rule-2);border-radius:var(--radius-sm);
  touch-action:none;cursor:crosshair;
}
.sign-pad-hint{
  position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;color:var(--ink-3);font-size:.9rem;
}
.sign-pad-btns{display:flex;gap:8px;margin-top:10px;}
.sign-pad-btns .btn{flex:1;justify-content:center;padding-left:10px;padding-right:10px;}

/* A checkbox that reads as a row rather than as a stray control. */
.check{
  display:flex;align-items:center;gap:9px;
  font-size:.93rem;color:var(--ink);cursor:pointer;
}
.check input{width:17px;height:17px;accent-color:var(--accent);flex-shrink:0;}