/* Shared login presentation; OJS retains the form and authentication flow. */
body.pkp_page_login .pkp_structure_page { background: #f2f6f8; }
body.pkp_page_login .pkp_structure_content { max-width: 1200px; padding: 32px 24px 64px; }
body.pkp_page_login .pkp_structure_main { width: 100%; padding: 0; border: 0; }
body.pkp_page_login .pkp_structure_main::before, body.pkp_page_login .pkp_structure_main::after { display: none; }
body.pkp_page_login .pkp_structure_sidebar { display: none; }
.page_login { max-width: none; color: #193749; }
.page_login * { box-sizing: border-box; }
.page_login .cmp_breadcrumbs { margin-bottom: 22px; }
.portal_login_layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; overflow: hidden; border: 1px solid #dae5eb; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px #113c5310; }
.portal_login_story { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 40px; color: #fff; background: linear-gradient(180deg,#03223922,#03223911 50%,#03223977),url('../public/site/portal/marine-cover.webp') center / cover; }
.portal_login_brand { display: flex; align-items: center; gap: 14px; color: #fff !important; text-decoration: none; font-size: 11px; font-weight: 700; line-height: 1.6; letter-spacing: .05em; }
.portal_login_brand img { flex: 0 0 56px; object-fit: contain; }
.portal_login_story_copy { margin: 30px 0 auto; }
.portal_login_kicker { margin: 0 0 16px; color: #13728d; font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1.6; }
.portal_login_story .portal_login_kicker { color: #85dedb; }
.portal_login_story h2 { margin: 0 0 20px; color: #fff; font-family: Georgia,serif; font-weight: 400; font-size: clamp(28px,3.1vw,42px); line-height: 1.16; letter-spacing: -.02em; }
.portal_login_story_copy > p:last-child { max-width: 310px; color: #d1e6eb; font-size: 13px; line-height: 1.8; }
.portal_login_credit { color: #e0eeee; font-size: 10px; letter-spacing: .025em; }
.portal_login_form_panel { align-self: center; min-width: 0; padding: 52px 48px; }
.page_login h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.25; letter-spacing: -.025em; color: #14394d; }
.portal_login_intro { margin: 0 0 12px; color: #536c7a; font-size: 14px; line-height: 1.6; }
.portal_login_form_panel > p:not([class]) { margin: 0 0 24px; color: #617582; font-size: 12px; }
.page_login .cmp_form { max-width: none; margin: 24px 0 0; }
.page_login .fields { margin: 0; padding: 0; border: 0; }
.page_login .fields > div { margin: 0 0 22px; padding: 0; max-width: none; }
.page_login .fields label { display: block; margin: 0; }
.page_login .fields .label { display: block; padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #243f50; }
.page_login .fields input[type=text], .page_login .fields input[type=password] { display: block; width: 100%; max-width: none; height: 49px; padding: 12px 14px; border: 1px solid #bdcfd8; border-radius: 9px; background: #fbfdfe; color: #17384a; font-size: 16px; box-shadow: none; }
.page_login input:focus-visible, .page_login a:focus-visible, .page_login button:focus-visible { outline: 3px solid #20a2bf; outline-offset: 3px; }
.page_login .fields .password a { display: block; width: fit-content; margin: 10px 0 0 auto; font-size: 12px; color: #087493; text-decoration: none; }
.page_login .fields .remember label { display: flex; align-items: flex-start; gap: 9px; }
.page_login .fields .remember input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #087a97; }
.page_login .fields .remember .label { margin: 0; color: #536c7a; font-size: 12px; font-weight: 400; line-height: 1.6; }
.page_login .fields .buttons { display: flex; flex-direction: column; gap: 20px; margin: 30px 0 0; padding: 0; }
.page_login .buttons .submit { display: block; width: 100%; min-height: 49px; padding: 12px 20px; border: 0; border-radius: 9px; background: #087590; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; text-shadow: none; box-shadow: 0 7px 16px #08759020; cursor: pointer; }
.page_login .buttons .submit:hover { background: #065970; }
.page_login .buttons .register { margin: 0; padding: 0; text-align: center; color: #087493; font-size: 13px; text-decoration: none; }
.page_login a:hover { text-decoration: underline; }
.page_login .pkp_form_error { padding: 14px; border-left: 3px solid #b72b36; border-radius: 6px; background: #fff0f1; color: #88222b; font-size: 13px; }
@media(max-width:800px) { .portal_login_layout { grid-template-columns: .85fr 1fr; } .portal_login_story { padding: 28px; } .portal_login_form_panel { padding: 36px 28px; } }
@media(max-width:620px) { body.pkp_page_login .pkp_structure_content { padding: 18px 14px 40px; } .portal_login_layout { grid-template-columns: 1fr; min-height: 0; border-radius: 18px; } .portal_login_story { min-height: 185px; padding: 25px; background-position: center 53%; } .portal_login_story_copy { margin: 20px 0 0; } .portal_login_story h2 { margin: 0; font-size: 25px; } .portal_login_story h2 br { display: none; } .portal_login_story_copy > p, .portal_login_credit { display: none; } .portal_login_form_panel { padding: 32px 24px; } }
/* Explicit sizes override legacy theme rules for images inside page content. */
.page_login .portal_login_brand img { width: 56px; min-width: 56px; max-width: 56px; height: 56px; flex-basis: 56px; }
.page_login .portal_login_story_copy { margin-top: 48px; }
.page_login .portal_login_story_copy h2 { margin: 0 0 20px; }
.page_login .portal_login_form_panel > .portal_login_kicker { margin: 0 0 14px; }
.page_login .portal_login_form_panel > h1 { margin: 0 0 10px; }
.page_login .portal_login_form_panel > .portal_login_intro { margin: 0 0 14px; }
.page_login .fields .recaptcha_wrapper { margin: 0; padding: 0; border: 0; }
@media(max-width:620px) { .page_login .portal_login_story_copy { margin-top: 24px; } .page_login .portal_login_story_copy h2 { margin-bottom: 0; } }
@media(max-width:380px) { .page_login .g-recaptcha { transform: scale(.85); transform-origin: left top; } }