/* Identity (sign-in, two-step, password reset) pages: touch-friendly sizes.
   2026-10-17 (Dean, on VITLApp2 from a tablet): the "Remember this device for 30 days" box on the
   two-step pages was Bootstrap's 13 px native checkbox, and the links under the code box were plain
   text; a finger cannot hit either reliably. The main sign-in page already had a 30 px box.
   Loaded by Areas\Identity\Pages\Shared\_Layout.cshtml after site.css; every rule sits under
   .identity-touch (the <main> on that layout), so nothing here reaches the app shell.
   Sizes follow the 44 px minimum tap target; inputs are 18 px so iPad Safari does not zoom in on focus. */

.identity-touch .form-control {
    min-height: 48px;
    font-size: 18px;
}

.identity-touch label {
    font-size: 1.05rem;
}

.identity-touch .btn:not(.btn-link) {
    min-height: 48px;
    padding: 0.55rem 1.4rem;
    font-size: 1.1rem;
}

/* The two-step pages stack several buttons; keep a finger's width between them. */
.identity-touch .mb-3 > .btn {
    margin-bottom: 6px;
}

/* Inline links and link-buttons ("send a new code", "choose a different method", "Forgot your password?"):
   a tap target of their own without breaking the sentence they sit in. */
.identity-touch a:not(.btn):not(.nav-link),
.identity-touch .btn-link {
    display: inline-block;
    padding: 10px 4px;
    margin: -10px 0;
    font-size: 1.05rem;
    text-decoration: underline;
}

.identity-touch .btn-link.p-0 {
    padding: 10px 4px !important;
}

/* The account pages' side menu (Profile, Two-step verification) is a stacked list of pills: the
   negative margins above made its items overlap (Dean, 2026-10-17), so they get a plain block
   with their own tap height instead. */
.identity-touch .nav-pills .nav-link {
    display: block;
    min-height: 44px;
    padding: 10px 14px;
    margin: 0 0 6px;
    font-size: 1.05rem;
    text-decoration: none;
}

/* Checkbox rows: a 30 px box and the whole label row as the tap area. */
.identity-touch .checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
    font-size: 1.05rem;
}

.identity-touch .checkbox input[type="checkbox"] {
    width: 30px;
    height: 30px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.identity-touch .alert {
    font-size: 1.05rem;
}

.identity-touch .form-group {
    margin-bottom: 1rem;
}