/* CM001 kit — signature.css (@layer cm.components).
 * The on-screen signature pad: a segmented Draw / Upload / Type control over a ruled signing area.
 * Every colour and radius comes from the platform tokens, so the pad re-themes with everything else. */
@layer cm.components {

  .cm-sig { display: grid; gap: 10px; max-width: 560px; }

  /* ---- segmented tabs ----
     One inset track with a raised active segment — the same control the rest of
     the industry uses for exactly this choice, and it reads instantly. */
  .cm-sig-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    padding: 4px; border-radius: 10px; background: var(--surface-2);
    border: 1px solid var(--line);
  }
  .cm-sig-tab {
    appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer;
    min-height: var(--control-h-sm, 32px); padding: 6px 10px; border-radius: 7px;
    font: 600 13.5px/1.2 inherit; color: var(--text-2);
  }
  .cm-sig-tab:hover { color: var(--text); }
  .cm-sig-tab.is-on {
    background: var(--surface); color: var(--text); border-color: var(--line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  }

  /* ---- the signing area ---- */
  .cm-sig-stage {
    position: relative; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; min-height: 168px; overflow: hidden;
  }
  .cm-sig-canvas { display: block; width: 100%; height: 168px; }
  /* touch-action:none is what stops the browser panning the page instead of
     drawing the moment a finger moves — without it the pad is unusable on a phone. */
  .cm-sig-stage.is-drawable .cm-sig-canvas { cursor: crosshair; touch-action: none; }

  /* the printed signing rule, purely decorative */
  .cm-sig-baseline {
    position: absolute; inset-inline: 24px; bottom: 38px; height: 0;
    border-bottom: 1px dashed var(--line-2, #cbd5e1); pointer-events: none;
  }
  .cm-sig-hint {
    position: absolute; inset-inline-start: 26px; bottom: 14px;
    font-size: 12.5px; color: var(--text-3); pointer-events: none;
  }

  /* ---- panes ---- */
  .cm-sig-pane[hidden] { display: none; }
  .cm-sig-file { display: block; }
  .cm-sig-file > span { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
  /* The native file input IS the Upload tab — it is moved in here rather than
     duplicated, so there is only ever one control posting a file. */
  .cm-sig-native { display: block; width: 100%; }
  .cm-sig-typed { width: 100%; }

  .cm-sig-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .cm-sig-status { font-size: 12.5px; color: var(--text-2); }

  /* Signed state: a quiet confirmation on the frame itself, so somebody scrolling
     a long checklist can see at a glance which signatures are done. */
  [data-cm-signed="1"] .cm-sig-stage { border-color: var(--ok, #16a34a); }

  @media (max-width: 560px) {
    .cm-sig-canvas, .cm-sig-stage { min-height: 150px; }
    .cm-sig-canvas { height: 150px; }
  }

  @media (prefers-reduced-motion: reduce) { .cm-sig * { transition: none !important; } }

  /* A completed checklist is printed as proof — the signature must survive it,
     the chrome around it need not. */
  @media print {
    .cm-sig-tabs, .cm-sig-pane, .cm-sig-actions, .cm-sig-hint, .cm-sig-baseline { display: none !important; }
    .cm-sig-stage { border-color: #999; }
  }
}