/* Dr. Prison — shared form styles. Built on tokens.css.
 * Every interactive form control gets consistent size, focus ring,
 * error + disabled state. */

.drp-form { display: flex; flex-direction: column; gap: var(--space-4); }

.drp-field { display: flex; flex-direction: column; gap: var(--space-1-5, 6px); position: relative; }
.drp-field label, .drp-field .drp-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 6px;
}
.drp-field .drp-required { color: var(--color-danger); font-weight: 700; margin-left: 2px; }

.drp-field input,
.drp-field select,
.drp-field textarea,
input.drp-input, select.drp-input, textarea.drp-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font: inherit;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
.drp-field textarea, textarea.drp-input { min-height: 120px; resize: vertical; }

.drp-field input:focus,
.drp-field select:focus,
.drp-field textarea:focus,
input.drp-input:focus, select.drp-input:focus, textarea.drp-input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.drp-field input:disabled,
.drp-field select:disabled,
.drp-field textarea:disabled,
input.drp-input:disabled, select.drp-input:disabled, textarea.drp-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--color-bg-sunken);
}

.drp-field .drp-help { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
.drp-field .drp-error { font-size: var(--fs-xs); color: var(--color-danger); }

.drp-field.is-invalid input,
.drp-field.is-invalid select,
.drp-field.is-invalid textarea,
.drp-field input[aria-invalid="true"],
.drp-field select[aria-invalid="true"],
.drp-field textarea[aria-invalid="true"] {
    border-color: var(--color-danger-border);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

/* --- Password / PIN visibility toggle wrap --- */
.drp-input-wrap { position: relative; display: block; width: 100%; }
.drp-input-wrap input { padding-right: 52px; }
.drp-toggle-visibility {
    position: absolute;
    top: 50%; right: 4px;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 0; background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.drp-toggle-visibility:hover,
.drp-toggle-visibility:focus-visible {
    background: var(--color-bg-sunken);
    color: var(--color-text);
    outline: none;
}
.drp-toggle-visibility svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.drp-toggle-visibility .eye-open { display: block; }
.drp-toggle-visibility .eye-closed { display: none; }
.drp-toggle-visibility[aria-pressed="true"] .eye-open { display: none; }
.drp-toggle-visibility[aria-pressed="true"] .eye-closed { display: block; }

/* --- Large tablet-friendly PIN fields --- */
.drp-field-pin input {
    min-height: 60px;
    font-size: 24px;
    letter-spacing: 0.18em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}