/* ===== Account pages: login, registration, lost password, registration complete ===== */
:root{--err:#B3261E;--err-bg:color-mix(in srgb,#B3261E 9%,var(--surface));--warn:#B45F06;--field-line:color-mix(in srgb,var(--muted) 70%,var(--line))}
:root[data-theme="dark"]{--err:#FFB4AB;--err-bg:color-mix(in srgb,#FFB4AB 14%,var(--surface));--warn:#F2B866}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--err:#FFB4AB;--err-bg:color-mix(in srgb,#FFB4AB 14%,var(--surface));--warn:#F2B866}}

/* ---- hero ---- */
.auhero-inner{position:relative;z-index:2;padding-top:40px;padding-bottom:120px}
.p-title{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.2vw,2.6rem);line-height:1.1;margin:14px 0 0;color:var(--h-ink)}
.p-lead{color:var(--h-muted);max-width:60ch;margin:10px 0 0;font-size:1.04rem}
html[data-authlayout="a"] .auhero-inner{text-align:center}
html[data-authlayout="a"] .p-lead{margin-inline:auto}

/* ---- layout: form card (rides up over the hero) + info panel, or one centred card ---- */
.aulayout{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px;align-items:start;margin-top:-90px;position:relative;z-index:5;padding-bottom:72px}
html[data-authlayout="a"] .aulayout{grid-template-columns:minmax(0,520px);justify-content:center}
html[data-mode="register"][data-authlayout="b"] .aulayout{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
html[data-mode="register"][data-authlayout="a"] .aulayout{grid-template-columns:minmax(0,640px)}
.acard{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -28px rgba(0,0,0,.45);overflow:hidden}
.atabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.atabs a{padding:16px;text-align:center;text-decoration:none;font-weight:700;color:var(--muted);background:linear-gradient(var(--accent),var(--accent)) no-repeat center bottom / 0% 3px;transition:background-size .25s,color .2s}
.atabs a:hover{color:var(--ink)}
.atabs a[aria-current="page"]{color:var(--ink);background-size:100% 3px}
.atabs a:focus-visible{outline-offset:-4px}
.abody{padding:28px 30px 30px}
.abody h2{margin:0 0 4px;font-family:var(--serif);font-size:1.3rem;line-height:1.3}
.abody .sub{margin:0 0 22px;color:var(--muted);font-size:.92rem}

/* ---- form: the markup is the OJS core's (cmp_form, fieldsets, .fields, .label) ---- */
.acard .cmp_form fieldset{min-width:0;border:0;margin:0 0 8px;padding:0}
.acard .cmp_form legend:not(.pkp_screen_reader){display:flex;align-items:center;gap:8px;width:100%;margin:0 0 12px;padding:0;font:800 .8rem var(--sans);color:var(--brand-text)}
.acard .cmp_form legend:not(.pkp_screen_reader)::after{content:"";flex:1;height:1px;background:var(--line)}
.acard .cmp_form .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.acard .cmp_form .fields>*{grid-column:1/-1;min-width:0}
.acard .cmp_form .fields>div{margin-bottom:14px}
.acard .cmp_form .fields>.given_name,.acard .cmp_form .fields>.family_name,.acard .cmp_form fieldset.login .fields>.password{grid-column:auto}
.acard .cmp_form label{display:block}
.acard .cmp_form .label{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px;margin-bottom:6px;font-size:.84rem;font-weight:700}
.acard .cmp_form .label small{margin-inline-start:auto;font-weight:500;font-size:.76rem;color:var(--muted)}
.acard .cmp_form .required{color:var(--err);font-weight:700}
.acard .cmp_form input[type="text"],.acard .cmp_form input[type="email"],.acard .cmp_form input[type="password"],.acard .cmp_form input[type="tel"],.acard .cmp_form input[type="url"],.acard .cmp_form select{display:block;width:100%;max-width:none;min-height:46px;padding:11px 13px;border:1.5px solid var(--field-line);border-radius:7px;background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .15s,background-color .15s}
.acard .cmp_form input:focus,.acard .cmp_form select:focus{border-color:var(--brand-text);background:var(--surface)}
.acard .cmp_form input::placeholder{color:var(--muted);opacity:1}
.acard .cmp_form [aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px transparent;box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 16%,transparent)}
.acard .cmp_form .msg{display:block;margin-top:5px;font-size:.8rem;font-weight:600;color:var(--err)}
.acard .cmp_form .description{display:block;margin-top:4px;font-size:.8rem;color:var(--muted)}
.acard .cmp_form .chk+.msg{margin-block:-8px 12px;margin-inline-start:28px}

/* password: show / hide button and strength indicator */
.pw{position:relative;display:block}
.acard .cmp_form .pw input{padding-inline-end:48px}
.pwt{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer}
.pwt:hover{background:var(--tint);color:var(--brand-text)}
.pwt[aria-pressed="true"]{background:var(--tint);color:var(--brand-text)}
.pwt .icon{width:18px;height:18px}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.meter i{height:4px;border-radius:2px;background:var(--line);transition:background-color .2s}
.meter[data-score="1"] i:nth-child(-n+1){background:var(--err)}
.meter[data-score="2"] i:nth-child(-n+2){background:var(--warn)}
.meter[data-score="3"] i:nth-child(-n+3){background:var(--accent)}
.meter[data-score="4"] i{background:var(--brand-2)}
.meter-txt{margin-top:4px;font-size:.78rem;color:var(--muted)}

/* checkboxes */
.acard .cmp_form label.chk,.chk{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:.88rem;line-height:1.5;cursor:pointer}
.chk input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand-text)}
.chk a{color:var(--brand-text);font-weight:600}
.acard .cmp_form .chk .label{display:inline;margin:0;font-size:inherit;font-weight:inherit}
.acard .cmp_form .fields>.optin{margin-bottom:0}
.acard .cmp_form fieldset.reviewer>legend:not(.pkp_screen_reader){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acard .cmp_form .reviewer_interests{margin-inline-start:28px}
.arow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:2px 0 18px;font-size:.88rem}
.arow a{color:var(--brand-text);font-weight:600}
.acard .cmp_form .arow .remember,.acard .cmp_form .arow .chk{margin:0}

/* submit */
.acard .cmp_form .buttons{display:block;margin:6px 0 0}
.acard .cmp_form .bsubmit{display:flex;justify-content:center;width:100%;padding:13px;border:1.5px solid var(--brand-text);border:1.5px solid color-mix(in srgb,var(--brand-text) 55%,var(--brand));border-radius:8px;background:var(--brand);color:#fff;font:800 1rem var(--sans);cursor:pointer;transition:filter .15s}
.acard .cmp_form .bsubmit:hover{filter:brightness(1.12)}
.alt{text-align:center;margin:20px 0 0;font-size:.9rem;color:var(--muted)}
.alt a{color:var(--brand-text);font-weight:700}

/* messages */
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:8px;background:var(--tint);font-size:.9rem;margin-bottom:18px;border-inline-start:4px solid var(--accent)}
.notice .icon{width:18px;height:18px;color:var(--brand-text);flex:none;margin-top:2px}
.notice.ok{border-inline-start-color:var(--brand-text)}
.acard .errbox,.acard #formErrors{margin:0 0 18px;padding:12px 14px;border-radius:8px;border-inline-start:4px solid var(--err);background:var(--err-bg);color:var(--err);font-size:.88rem;font-weight:600;scroll-margin-top:8px}
.acard #formErrors .pkp_form_error{display:block;font-size:.9rem;color:inherit}
.acard #formErrors ul{margin:6px 0 0;padding:0;padding-inline-start:1.2em;font-weight:500}
.acard #formErrors li{margin:2px 0}
.acard #formErrors a{color:inherit}

/* reCAPTCHA */
.acard .cmp_form .recaptcha_wrapper{margin:4px 0 10px}
.acard .cmp_form .recaptcha{max-width:100%;overflow-x:auto}

/* site-level registration: journals and roles */
.contexts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.contexts .context{padding:14px 16px;border:1px solid var(--line);border-radius:8px}
.contexts .name{margin-bottom:8px;font-weight:700}
.acard .cmp_form fieldset.roles{margin:0}
.acard .cmp_form fieldset.roles>legend:not(.pkp_screen_reader){font-weight:600;color:var(--muted);margin-bottom:8px}
.acard .cmp_form fieldset.roles>legend:not(.pkp_screen_reader)::after{display:none}
.contexts .context_privacy{margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}

/* registration complete */
.next-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.next-list a{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;transition:border-color .15s}
.next-list a:hover{border-color:var(--brand-text);color:var(--brand-text)}
.next-list .ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--brand-text)}
.next-list .ic .icon{width:18px;height:18px}

/* ---- fields added by plugins ---- */
/* ORCID profile plugin: its button and link come right after the opening form tag */
.acard #register #connect-orcid-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border:1.5px solid var(--field-line);border-radius:8px;background:var(--surface);color:var(--ink);font:700 .92rem var(--sans);cursor:pointer}
.acard #register #connect-orcid-button:hover{border-color:var(--brand-text)}
.acard #register #connect-orcid-button svg,.acard #register #connect-orcid-button img{width:22px;height:22px;flex:none}
.acard #register #connect-orcid-button+a{display:block;margin:8px 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line);text-align:center;font-size:.8rem;color:var(--brand-text)}
/* Registration fields plugin (ORCID iD, phone): its fieldsets sit between the identity and account groups; the legend repeats the label */
.acard .cmp_form fieldset[class^="registrationFields_"]>legend:not(.pkp_screen_reader){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the plugin sets the description colour inline (#666); the text is painted with the theme's muted colour instead, in both colour schemes */
.acard fieldset[class^="registrationFields_"] .description{-webkit-text-fill-color:var(--muted)}

/* ---- info panel ---- */
.au-info{min-width:0;padding-top:110px}
.au-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--serif);font-size:1.25rem;line-height:1.3}
.au-h .ribbon{width:13px;height:19px}
.au-desc{margin:0 0 22px;max-width:60ch;color:var(--muted);font-size:.95rem;line-height:1.6}
.ben{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ben li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center}
.ben .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tint);color:var(--brand-text)}
.ben .ic .icon{width:20px;height:20px}
.ben a{display:block;font-size:.98rem;font-weight:700;color:var(--ink);text-decoration:none}
.ben a:hover{color:var(--brand-text);text-decoration:underline}
.ben span span{font-size:.88rem;color:var(--muted);line-height:1.5}
.au-help{margin:26px 0 0;padding:18px 20px;border:1px dashed var(--line);border-radius:10px;font-size:.88rem;color:var(--muted)}
.au-help a{color:var(--brand-text);font-weight:700}

@media (max-width:860px){
  .aulayout,html[data-mode="register"][data-authlayout="b"] .aulayout,html[data-authlayout="a"] .aulayout,html[data-mode="register"][data-authlayout="a"] .aulayout{grid-template-columns:minmax(0,1fr);margin-top:-70px;gap:28px}
  .auhero-inner{padding-bottom:100px}
  .au-info{padding-top:0}
  .abody{padding:22px 18px}
}
@media (max-width:560px){
  .acard .cmp_form .fields{grid-template-columns:minmax(0,1fr)}
}

/* ---- forced colours, print ---- */
@media (forced-colors:active){
  .atabs a[aria-current="page"]{border-bottom:3px solid Highlight}
  .meter i{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText}
  .meter[data-score="1"] i:nth-child(-n+1),.meter[data-score="2"] i:nth-child(-n+2),.meter[data-score="3"] i:nth-child(-n+3),.meter[data-score="4"] i{background:Highlight}
  .acard .cmp_form .bsubmit,.pwt{border:1px solid ButtonText}
}
@media print{
  .aulayout{display:block;margin-top:0}
  .acard{box-shadow:none}
  .atabs,.au-info,.pwt{display:none}
}