/* ── Waiver signature field ─────────────────────────────────────────── */
/* Mode toggle (Draw / Type); the signature controller toggles .active. */
.hos-sig-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn, 6px);
  cursor: pointer;
  transition: color 150ms, background-color 150ms, border-color 150ms;
}
.hos-sig-mode-btn:hover { background-color: var(--surface-alt); }
.hos-sig-mode-btn.active {
  color: var(--accent);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

/* Canvas — white surface with a subtle ruled guide line. */
.hos-sig-canvas-container {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 39px, var(--hairline) 39px, var(--hairline) 40px
  );
}
.hos-sig-canvas { cursor: crosshair; display: block; }

/* Typed signature — dashed field, cursive preview. */
.hos-sig-typed-input {
  width: 100%;
  height: 3.25rem;
  padding: 0 0.875rem;
  font-family: "Brush Script MT", cursive;
  font-size: 1.25rem;
  color: var(--ink);
  background-color: var(--surface);
  border: 2px dashed var(--hairline-strong);
  border-radius: var(--radius-md, 8px);
}
.hos-sig-typed-input:focus {
  outline: none;
  border-color: var(--accent);
}