/* Phase 1T.5.27 — narrow first-login security card with restored vertical breathing room. */
.pems-security-page {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.55rem, 1.4vw, 1.1rem);
    box-sizing: border-box;
}

.pems-security-card {
    width: min(100%, 27rem);
    overflow: hidden;
    border: 1px solid #ead8d3;
    border-radius: .88rem;
    background: #fff;
    box-shadow: 0 14px 34px rgba(74, 17, 17, .10), 0 3px 9px rgba(15, 23, 42, .05);
}

.pems-security-card-header {
    display: flex;
    align-items: center;
    gap: .62rem;
    padding: .78rem .95rem .74rem;
    border-bottom: 3px solid #d7aa1d;
    color: #fff;
    background: linear-gradient(135deg, #6b0c0c 0%, #861818 56%, #6c0d0d 100%);
}

.pems-security-icon {
    flex: 0 0 1.95rem;
    width: 1.95rem;
    height: 1.95rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .58rem;
    color: #ffe082;
    background: rgba(255,255,255,.08);
}
.pems-security-icon svg { width: 1rem; height: 1rem; }
.pems-security-heading-copy { min-width: 0; }
.pems-security-kicker {
    margin-bottom: .08rem;
    color: #ffd65a;
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.pems-security-card-header h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.012em;
}
.pems-security-card-header p {
    margin: .22rem 0 0;
    color: #f8dddd;
    font-size: .63rem;
    line-height: 1.28;
}

.pems-security-account-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: .48rem .95rem;
    border-bottom: 1px solid #f0e3df;
    background: #fffaf8;
    color: #334155;
}
.pems-security-account-strip > div { min-width: 0; }
.pems-security-account-label {
    display: block;
    margin-bottom: .02rem;
    color: #8a6a63;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pems-security-account-strip strong {
    display: block;
    overflow: hidden;
    color: #6f1515;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pems-security-email {
    flex: 0 1 auto;
    max-width: 58%;
    overflow: hidden;
    padding: .2rem .42rem;
    border: 1px solid #ead8d3;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: .57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pems-security-form {
    display: grid;
    gap: .47rem;
    padding: .68rem .95rem .76rem;
}
.pems-security-field label {
    display: block;
    margin-bottom: .17rem;
    color: #293548;
    font-size: .65rem;
    font-weight: 800;
}
.pems-security-field .pems-field {
    min-height: 2.08rem;
    height: 2.08rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .72rem;
}

.pems-password-input-shell { position: relative; width: 100%; }
.pems-password-input-shell input {
    width: 100%;
    padding-right: 1.9rem !important;
    box-sizing: border-box;
}
.pems-password-toggle {
    position: absolute;
    top: 50%;
    right: .26rem;
    z-index: 2;
    width: 1.3rem !important;
    min-width: 0 !important;
    height: 1.3rem !important;
    min-height: 0 !important;
    display: grid;
    place-items: center;
    padding: 0 !important;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: .32rem;
    background: transparent;
    color: #64748b;
    line-height: 0;
    cursor: pointer;
    box-shadow: none !important;
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
}
.pems-password-toggle:hover { color: #7b1515; background: #fff3ef; }
.pems-password-toggle:focus-visible { outline: 2px solid #d7aa1d; outline-offset: 1px; }
.pems-password-toggle:active { transform: translateY(-50%) scale(.92); }
.pems-password-toggle svg { width: .74rem; height: .74rem; }
.pems-eye-hide { display: none; }
.pems-password-toggle[aria-pressed="true"] .pems-eye-show { display: none; }
.pems-password-toggle[aria-pressed="true"] .pems-eye-hide { display: inline-grid; }

.pems-security-error {
    margin: .18rem 0 0;
    color: #b42318;
    font-size: .59rem;
    font-weight: 700;
}

.pems-password-strength {
    --strength-color: #94a3b8;
    display: grid;
    gap: .16rem;
    padding: .34rem .5rem .36rem;
    border: 1px solid #e5e7eb;
    border-radius: .48rem;
    background: #fbfcfe;
    transition: border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.pems-password-strength[data-strength="weak"] { --strength-color: #b42318; border-color: #f1c0ba; background: #fff8f7; }
.pems-password-strength[data-strength="medium"] { --strength-color: #b7791f; border-color: #efd49b; background: #fffbf1; }
.pems-password-strength[data-strength="strong"] { --strength-color: #16855b; border-color: #b8dfcf; background: #f5fcf9; }
.pems-password-strength-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: #64748b;
    font-size: .57rem;
    font-weight: 800;
    line-height: 1.15;
}
.pems-password-strength-head strong {
    color: var(--strength-color);
    font-size: .57rem;
    letter-spacing: .012em;
    transition: color .22s ease, transform .22s ease, opacity .22s ease;
}
.pems-password-strength.is-updating .pems-password-strength-head strong { opacity: .35; transform: translateY(-1px); }
.pems-password-strength-bars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .2rem;
}
.pems-password-strength-bars span {
    position: relative;
    height: .15rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e4e8ee;
}
.pems-password-strength-bars span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--strength-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .28s cubic-bezier(.2,.75,.2,1), background-color .22s ease;
}
.pems-password-strength[data-strength="weak"] [data-pems-strength-segment="1"]::after,
.pems-password-strength[data-strength="medium"] [data-pems-strength-segment="1"]::after,
.pems-password-strength[data-strength="medium"] [data-pems-strength-segment="2"]::after,
.pems-password-strength[data-strength="strong"] [data-pems-strength-segment="1"]::after,
.pems-password-strength[data-strength="strong"] [data-pems-strength-segment="2"]::after,
.pems-password-strength[data-strength="strong"] [data-pems-strength-segment="3"]::after { transform: scaleX(1); }
.pems-password-strength p {
    margin: 0;
    color: #738095;
    font-size: .52rem;
    line-height: 1.18;
}

.pems-security-requirements {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .34rem;
    padding: .42rem .5rem;
    border: 1px solid #f0cf72;
    border-radius: .5rem;
    background: #fff9e9;
    color: #5d4a18;
    font-size: .57rem;
    line-height: 1.22;
}
.pems-security-requirements-icon { color: #a47400; padding-top: .02rem; }
.pems-security-requirements-icon svg { width: .82rem; height: .82rem; }
.pems-security-requirements strong {
    display: block;
    margin-bottom: .12rem;
    color: #624713;
    font-size: .6rem;
}
.pems-security-requirements ul {
    display: grid;
    gap: .08rem;
    margin: 0;
    padding-left: .9rem;
    list-style: disc;
}
.pems-security-requirements li {
    display: list-item;
    width: 100%;
    padding: 0;
    white-space: normal;
}
.pems-security-requirements li::marker { color: #a47400; }

.pems-security-actions {
    display: grid;
    grid-template-columns: minmax(6rem, .58fr) minmax(0, 1.42fr);
    gap: .46rem;
    margin-top: 0;
}
.pems-security-submit,
.pems-security-cancel {
    min-height: 2.08rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    padding: .38rem .6rem;
    border-radius: .5rem;
    font-size: .65rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease;
}
.pems-security-submit {
    border: 1px solid #711313;
    background: linear-gradient(180deg, #8b1b1b 0%, #721313 100%);
    color: #fff;
    box-shadow: 0 4px 9px rgba(112, 19, 19, .13);
}
.pems-security-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
.pems-security-cancel {
    border: 1px solid #d9dee7;
    background: #fff;
    color: #4b5565;
    box-shadow: 0 1px 4px rgba(15,23,42,.04);
}
.pems-security-cancel:hover:not(:disabled) { transform: translateY(-1px); border-color: #c7ced9; background: #f8fafc; color: #6f1515; }
.pems-security-submit:disabled,
.pems-security-cancel:disabled { cursor: wait; opacity: .62; }
.pems-security-submit svg { width: .76rem; height: .76rem; }
.pems-security-footnote {
    margin: -.08rem 0 0;
    color: #7a879a;
    font-size: .51rem;
    line-height: 1.18;
    text-align: center;
}

@media (max-height: 700px) and (min-width: 641px) {
    .pems-security-page { align-items: flex-start; padding-top: .4rem; padding-bottom: .4rem; }
    .pems-security-card-header { padding-top: .55rem; padding-bottom: .52rem; }
    .pems-security-card-header p { margin-top: .15rem; }
    .pems-security-form { gap: .34rem; padding-top: .48rem; padding-bottom: .5rem; }
    .pems-password-strength p { display: none; }
}

@media (max-width: 640px) {
    .pems-security-page { padding: .55rem; align-items: flex-start; }
    .pems-security-card { width: 100%; }
    .pems-security-card-header { padding: .65rem .75rem; }
    .pems-security-account-strip { align-items: flex-start; flex-direction: column; gap: .25rem; padding: .42rem .75rem; }
    .pems-security-email { max-width: 100%; }
    .pems-security-form { padding: .58rem .75rem .65rem; }
    .pems-security-actions { grid-template-columns: 1fr; }
    .pems-security-cancel { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .pems-password-toggle,
    .pems-password-strength,
    .pems-password-strength-head strong,
    .pems-password-strength-bars span::after,
    .pems-security-submit,
    .pems-security-cancel { transition: none; }
}

/* Phase 1T.5.59 password feedback: compact but unmistakable. */
.pems-password-status { padding: .5rem .65rem; border: 1px solid #d9e4f0; border-radius: .5rem; background: #f5faff; color: #28496b; font-size: .7rem; font-weight: 750; line-height: 1.35; }
.pems-password-status[hidden] { display: none !important; }
.pems-password-status[data-state="danger"] { background: #fff4f3; border-color: #e9b9b5; color: #9b1c1c; }
.pems-password-status[data-state="success"] { background: #effcf5; border-color: #a6dbc1; color: #176345; }