/* The signature pad (signature-pad.js): three tabs, Type, Draw and Upload.
 * Load after style.css. Every value is a Mainframe token, with one exception
 * that is marked below. */

/* A signature goes on white paper, so the surface a person signs on is light
 * and the ink is dark in both modes. Dark mode swaps the two ground tokens to
 * get there: its foreground is the light tone and its background the dark one. */
:root { --sig-paper: hsl(var(--citadl-background)); --sig-ink: hsl(var(--citadl-foreground)); }
.dark { --sig-paper: hsl(var(--citadl-foreground)); --sig-ink: hsl(var(--citadl-background)); }
.sig-paper { background: var(--sig-paper); color: var(--sig-ink); }

.sigpad__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--citadl-hairline) solid var(--line); border-radius: var(--r); }
.sigpad__tab { min-height: var(--tap); padding: 0 var(--citadl-space-cell); border: 0; border-right: var(--citadl-hairline) solid var(--line);
  background: none; color: var(--ink-2); font-size: var(--citadl-font-size-body); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--citadl-letter-spacing-label); transition: background-color var(--t), color var(--t); }
.sigpad__tab:last-child { border-right: 0; }
.sigpad__tab:hover { color: var(--ink); }
.sigpad__tab[aria-selected=true] { background: var(--accent-tint); color: var(--accent-text);
  box-shadow: inset 0 calc(var(--citadl-hairline) * -2) 0 var(--accent); }
/* The focus ring sits inside the tab, so the row's border does not clip it. */
.sigpad__tab:focus-visible { outline-offset: calc(var(--citadl-hairline) * -3); }

.sigpad__panel { margin-top: var(--citadl-space-stack); }
.sigpad__panel > * + * { margin-top: var(--citadl-space-cell); }

/* The paper: where the typed preview, the drawing or the uploaded image shows. */
.sigpad__paper { position: relative; height: calc(var(--tap) * 4); border: var(--citadl-hairline) solid var(--line); border-radius: var(--r); overflow: hidden; }
.sigpad__paper canvas { display: block; width: 100%; height: 100%; }
/* The line to sign on. It is drawn by the page, never into the signature itself. */
.sigpad__paper::after { content: ''; position: absolute; left: var(--citadl-space-panel); right: var(--citadl-space-panel); bottom: 28%;
  border-bottom: var(--citadl-hairline) solid currentColor; opacity: .25; pointer-events: none; }
.sigpad__paper.is-plain::after { display: none; }

/* THE ONE FONT FAMILY IN INK THAT IS NOT A MAINFRAME TOKEN. A typed signature
 * is previewed in a handwriting face that is already on the signer's device,
 * ending with the generic cursive family. Mainframe has no handwriting face
 * and Ink ships none. test/mainframe.test.ts allows exactly the next line. */
.sigpad__typed { font-family: 'Snell Roundhand', 'Savoye LET', 'Segoe Script', 'Lucida Handwriting', 'Brush Script MT', cursive; }

/* touch-action: none keeps a finger or stylus drawing instead of scrolling the page. */
.sigpad__draw { touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.sigpad__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--citadl-space-stack); flex-wrap: wrap; }
.sigpad__actions .msg { flex: 1; min-width: 0; }

/* Upload: the paper is also the place to drop a file. */
.sigpad__drop.is-over { border-color: var(--accent); box-shadow: inset 0 0 0 var(--citadl-hairline) var(--accent); }
.sigpad__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--citadl-space-panel); font-size: var(--citadl-font-size-body); opacity: .6; pointer-events: none; }