/*
 * Signature faces for an adopted (typed) signature.
 *
 * No webfont is loaded: a signing page is opened once, often on a phone on a
 * driveway with two bars, and a mark that renders as body text while a 300KB
 * font downloads is worse than no mark at all. Each face is a stack of script
 * families that ship with macOS/iOS, Windows and Android, ending in the
 * generic `cursive` keyword.
 *
 * The documented fallback: if every named family is missing, `cursive` is
 * honoured by every current browser (Android maps it to Dancing Script, Linux
 * desktops to URW Chancery or Z003). If even that resolves to the default
 * sans, the slant, the tracking, the ink colour and the baseline rule below
 * keep the mark reading as a signature rather than as a line of the agreement.
 * The same three stacks are mirrored in adopt_signature_controller.js, which
 * rasterises the chosen face to a canvas for the evidence PNG - change them
 * together.
 *
 * Zapfino is deliberately NOT in any stack. It ships on iOS, so it used to win
 * cursive-formal there, and its glyphs occupy about 2.6em of vertical space:
 * inside a 23px mark box the name was rendered headless, and the evidence PNG
 * was cut off top and bottom because the shrink loop only ever measured width.
 * It is a display face, not a signature face. Savoye LET ships on iOS and macOS
 * and is a genuine copperplate, well separated from Snell Roundhand.
 */

.kf-face {
  display: inline-block;
  max-width: 100%;
  color: #1e293b;
  /* Sized to its own ink, not clipped to a sans-serif line box. A script face
     with real ascenders and descenders needs the room; the CLIP belongs to
     .kf-fieldmark and .kf-preview, which know how much space they have. */
  line-height: 1.6;
  padding-block: 0.06em;
  white-space: nowrap;
  text-overflow: clip;
  font-weight: 400;
  font-size: 2rem;
}

.kf-face--cursive-classic {
  font-family: "Snell Roundhand", "Lucida Handwriting", "Apple Chancery", "URW Chancery L", cursive;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* The tracking is not decoration. On Android none of the named families exist
   and all three stacks fall through to the generic keyword, which maps to one
   family - so without this, classic and formal render byte-identically and the
   picker offers three options of which two are the same mark. */
.kf-face--cursive-formal {
  font-family: "Savoye LET", "SavoyeLetPlain", "Edwardian Script ITC", "Gabriola", "Segoe Script", cursive;
  font-style: italic;
  letter-spacing: 0.06em;
}

.kf-face--cursive-casual {
  font-family: "Bradley Hand", "Noteworthy", "Segoe Print", "Ink Free", "Marker Felt", cursive;
  font-style: normal;
  letter-spacing: 0.005em;
}

.kf-facepick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 480px) {
  .kf-facepick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kf-facepick-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.kf-facepick-option:hover { border-color: #cbd5e1; }
.kf-facepick-option[aria-pressed="true"] {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.kf-facepick-option .kf-face { font-size: 1.5rem; }