/* media.css: kit lane K6. Signature pad and camera. Colors come from tokens; light and dark follow them. */
/* The pad is paper: the stored PNG is dark strokes on transparent, so the pad stays light in dark mode too. */
dproph-signature, dproph-camera { display: block; }
dproph-signature { max-width: 100%; }
.signature-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); }
.signature-pad { display: block; max-width: 100%; touch-action: none; cursor: crosshair; color: var(--signature-ink); background: var(--signature-paper); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.signature-pad:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signature-clear { margin-top: var(--space-2); }
.signature-existing { display: block; max-width: 100%; margin-bottom: var(--space-2); padding: var(--space-2); background: var(--signature-paper); border: 1px solid var(--border); border-radius: var(--radius-md); }
.signature > label { display: block; margin-top: var(--space-3); }
.signature > input[type="text"] { width: 100%; min-height: 2.5rem; padding: 0.45rem 0.7rem; background: var(--surface); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-sm); }

.camera dproph-camera > input[type="file"] { width: 100%; }
.camera-use { margin-top: var(--space-2); }
.camera-panel { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-2); padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.camera-panel video { width: 21.875rem; max-width: 100%; aspect-ratio: 4 / 3; background: var(--ink); border-radius: var(--radius-sm); object-fit: cover; }
.camera-panel > .btn { min-height: 2.75rem; }
.camera-status { margin: var(--space-2) 0 0; color: var(--danger-ink); }
.camera-status:empty { display: none; }