/* YPR sign-in screen skin — loaded on wp-login.php by inc/login-skin.php. Targets WordPress's own login markup. */
/* ============================================================
   YPR staff sign-in — "split-hero" skin
   Left 48%: purple hero in the public-site language.
   Right 52%: deep ink→plum column, white YPR logo, white card,
   yellow button, "Powered by optimistic." pinned to the bottom.
   ============================================================ */
:root{
  --ypr-violet:#B309AD; --ypr-violet-dk:#7a0676; --ypr-violet-lt:#c93dc4;
  --ypr-plum:#3a0338; --ypr-plum-deep:#43033f;
  --ypr-yellow:#ECA803; --ypr-yellow-lt:#f6b81e; --ypr-yellow-dk:#a87400; --ypr-blue:#1172A2;
  --ypr-ink:#0c0c0e; --ypr-ink-2:#16151a; --ypr-ink-3:#1f1d24;
  --ypr-grey-100:#f5f4f6; --ypr-grey-200:#e7e5ea; --ypr-grey-400:#b8b4c0; --ypr-grey-600:#6c6776; --ypr-grey-800:#2c2a31;
  --ypr-on-dark:#f5f4f6; --ypr-on-dark-muted:#cfc8d2;
  --ypr-ease:cubic-bezier(.2,.7,.2,1);
  --ypr-font-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ypr-font-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --ypr-font-script:"Caveat Brush","Brush Script MT",cursive;
}
html{background:#1b0a1e;}
body.login{
  /* Re-point WP core's admin theme colour so its own focus rings / checkbox
     / toggletip accents come out violet instead of blue. */
  --wp-admin-theme-color:#B309AD; --wp-admin-theme-color--rgb:179,9,173;
  --wp-admin-theme-color-darker-10:#9a0895; --wp-admin-theme-color-darker-20:#7a0676;
  margin:0; min-height:100vh; min-height:100dvh; box-sizing:border-box;
  color:var(--ypr-on-dark); font-family:var(--ypr-font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(60% 46% at 74% 44%, rgba(179,9,173,.28) 0%, rgba(179,9,173,0) 70%),
    linear-gradient(180deg, #4a0448 0%, #2e0a30 55%, #1b0a1e 100%);
  display:grid;
  grid-template-columns:minmax(0,48fr) minmax(0,52fr);
  grid-template-rows:minmax(0,1fr) auto auto;
}

/* ---------- Left: hero panel (markup from body.html) ---------- */
.login .ypr-hero{
  grid-column:1; grid-row:1 / -1; position:relative; overflow:hidden; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(28px,4vw,56px);
  color:#fff;
  background:
    radial-gradient(62% 52% at 86% 8%, rgba(201,61,196,.8) 0%, rgba(201,61,196,0) 62%),
    linear-gradient(180deg, #b309ad 0%, #930889 38%, #7a0676 56%, #5a0454 80%, #43033f 100%);
}
.login .ypr-hero__swirl{
  /* The mark bleeds off the top-right corner. Size is also bounded by viewport height so on short
     screens the outer arc stays clear of the headline block. */
  position:absolute; top:-7%; right:-13%; width:min(70%,560px,54vh); height:auto; aspect-ratio:1/1;
  pointer-events:none; transform-origin:50% 50%; opacity:.94;
  animation:ypr-swirl-spin 180s linear infinite;
}
@media (max-width: 1100px){
  .login .ypr-hero__swirl{ top:3%; right:-20%; width:min(94%,48vh); }
}
.login .ypr-hero__tag{
  position:relative; z-index:1; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px 9px 13px; border:1px solid rgba(255,255,255,.42); border-radius:999px;
  background:rgba(58,3,56,.22);
  font:700 12px/1 var(--ypr-font-body); letter-spacing:.14em; text-transform:uppercase; color:#fff;
  animation:ypr-rise .7s var(--ypr-ease) both;
}
.login .ypr-hero__tag::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--ypr-yellow);
  box-shadow:0 0 0 3px rgba(236,168,3,.28);
}
.login .ypr-hero__copy{ position:relative; z-index:1; max-width:640px; animation:ypr-rise .8s .08s var(--ypr-ease) both; }
.login .ypr-hero__eyebrow{
  display:inline-block; margin:0 0 10px 2px;
  font:400 clamp(26px,2.7vw,38px)/1.05 var(--ypr-font-script); color:var(--ypr-yellow);
  transform:rotate(-2.5deg); transform-origin:left bottom;
}
.login .ypr-hero__title{
  margin:0 0 20px; font-family:var(--ypr-font-display); font-weight:400;
  font-size:clamp(64px,min(9.4vw,14.5vh),132px); line-height:.9; letter-spacing:.004em;
  text-transform:uppercase; color:#fff; text-wrap:balance;
}
.login .ypr-hero__title em{ display:block; font-style:italic; color:var(--ypr-yellow); }
.login .ypr-hero__lede{
  margin:0; max-width:40ch; font-size:clamp(15px,1.3vw,18px); line-height:1.5; font-weight:500; color:rgba(255,255,255,.9);
}
.login .ypr-hero__lede span{ display:block; }

/* ---------- Right: #login column ---------- */
.login #login{
  grid-column:2; grid-row:1; align-self:center; justify-self:center; box-sizing:border-box;
  width:min(408px,100% - 32px); margin:0; padding:40px 0 20px;
  animation:ypr-rise .7s .05s var(--ypr-ease) both;
}
.login #login h1{ text-align:center; margin:0 0 20px; }
.login #login h1 a{
  display:block; width:100%; height:72px; margin:0 auto; padding:0; border-radius:8px;
  /* The webp carries ~27% transparent padding; oversize the image inside the 72px box so the artwork itself is ~64px tall. */
  background:url(../img/logo-white.webp) center 40% / auto 88px no-repeat;
  color:transparent; text-indent:-9999px; overflow:hidden; outline-offset:6px;
}
.login #login h1 a:focus-visible{ outline:2px solid var(--ypr-yellow); }

/* Hint / notices: quiet, not alarms */
.login #login .message, .login #login .notice, .login #login .success{
  margin:0 0 16px; padding:10px 14px; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  background:rgba(255,255,255,.06); color:var(--ypr-on-dark-muted);
  font-size:13px; line-height:1.5; text-align:center; text-wrap:balance; word-wrap:break-word;
}
.login #login .message p, .login #login .notice p, .login #login .success p{ margin:0; font-size:13px; line-height:1.5; }
.login #login .message a, .login #login .notice a, .login #login .success a{
  color:var(--ypr-yellow); font-weight:600; text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:rgba(236,168,3,.45); text-underline-offset:3px;
  transition:text-decoration-color .18s var(--ypr-ease), color .18s var(--ypr-ease);
}
.login #login .message a:hover, .login #login .message a:focus-visible{ text-decoration-color:currentColor; color:var(--ypr-yellow-lt); }
.login #login .success{ border-left:4px solid var(--ypr-yellow); text-align:left; }
/* Error: a light card so it reads as the form's own alert, red rule, brand text */
.login #login #login_error{
  margin:0 0 16px; padding:12px 16px; text-align:left; text-wrap:wrap;
  background:#fff; border:0; border-left:4px solid #c8102e; border-radius:12px;
  color:var(--ypr-grey-800); box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.login #login #login_error p{ color:var(--ypr-grey-800); }
.login #login #login_error strong{ color:#9b0c22; }
.login #login #login_error a{ color:var(--ypr-violet-dk); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* The card */
.login #login form{
  margin:0; padding:26px 26px 24px; overflow:visible;
  background:#fff; border:0; border-radius:14px;
  box-shadow:0 28px 70px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.06);
}
.login #login form p{ margin:0; }
.login #login form > p:first-child{ margin:0 0 16px; }
.login #login form .user-pass-wrap{ margin:0 0 16px; }
.login #login form label{
  display:block; margin:0 0 6px; font-size:13.5px; font-weight:600; line-height:1.4;
  color:var(--ypr-grey-800); letter-spacing:.005em;
}
.login #login form .input,
.login #login form input[type="text"],
.login #login form input[type="password"],
.login #login form input[type="email"]{
  box-sizing:border-box; width:100%; height:46px; min-height:46px; max-height:none; margin:0; padding:10px 14px;
  font-family:var(--ypr-font-body); font-size:16px; line-height:1.4; color:var(--ypr-ink-2);
  background:#fbfafc; border:1.5px solid #8e889a; border-radius:10px; box-shadow:none; outline:0;
  transition:border-color .18s var(--ypr-ease), box-shadow .18s var(--ypr-ease), background .18s var(--ypr-ease);
}
.login #login form .input:hover{ border-color:#6c6776; }
.login #login form .input:focus{
  background:#fff; border-color:var(--ypr-violet);
  box-shadow:0 0 0 3px rgba(179,9,173,.22); outline:2px solid transparent;
}
.login #login form input.password-input{ font-family:var(--ypr-font-body); letter-spacing:.08em; }
.js.login #login form input.password-input{ padding-right:48px; }
.login #login .wp-pwd{ position:relative; }
.login #login .button.wp-hide-pw{
  position:absolute; top:0; right:0; width:46px; height:46px; min-width:0; min-height:0; margin:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:10px; box-shadow:none;
  color:var(--ypr-grey-600); cursor:pointer; transition:color .18s var(--ypr-ease);
}
.login #login .button.wp-hide-pw:hover{ background:transparent; color:var(--ypr-violet-dk); }
.login #login .button.wp-hide-pw:focus{
  background:transparent; color:var(--ypr-violet-dk); border-color:transparent;
  box-shadow:none; outline:2px solid var(--ypr-violet); outline-offset:1px;
}
.login #login .button.wp-hide-pw:active{ background:transparent; transform:none; }
.login #login .button.wp-hide-pw .dashicons{ width:20px; height:20px; font-size:20px; line-height:1; }

/* Remember me + help toggle */
.login #login form .forgetmenot{
  float:none; display:flex; align-items:center; gap:8px; min-height:0; margin:0 0 18px; font-size:13.5px;
}
.login #login form .forgetmenot label{ margin:0; font-size:13.5px; font-weight:500; color:var(--ypr-grey-800); line-height:1.4; }
.login #login form .forgetmenot input[type="checkbox"]{
  -webkit-appearance:auto; appearance:auto; accent-color:var(--ypr-violet);
  width:18px; height:18px; min-width:18px; margin:0; border:0; border-radius:4px; background:none; box-shadow:none; cursor:pointer;
}
.login #login form .forgetmenot input[type="checkbox"]:checked::before{ content:none; }
.login #login form .forgetmenot input[type="checkbox"]:focus{ box-shadow:none; outline:0; }
.login #login form .forgetmenot input[type="checkbox"]:focus-visible{ outline:2px solid var(--ypr-violet); outline-offset:2px; }
.login #login form .forgetmenot .wp-tooltip{ display:inline-flex; margin-left:-2px; }
.login #login .wp-tooltip .wp-tooltip__toggle{ color:var(--ypr-grey-600); border-radius:50%; transition:color .18s var(--ypr-ease); }
.login #login .wp-tooltip .wp-tooltip__toggle:hover,
.login #login .wp-tooltip .wp-tooltip__toggle:focus{ color:var(--ypr-violet-dk); }
.login #login .wp-tooltip .wp-tooltip__toggle:focus{ outline:2px solid var(--ypr-violet); outline-offset:1px; box-shadow:none; }

/* Primary button — WP core's .button-primary needs !important to lose */
.login #login form p.submit{ margin:0; padding:0; border:0; }
.wp-core-ui.login #login #wp-submit,
.wp-core-ui.login #login .button-primary{
  float:none; display:block; width:100%; box-sizing:border-box; height:48px; min-height:48px; margin:0; padding:0 20px;
  font-family:var(--ypr-font-body); font-size:15px; font-weight:800; letter-spacing:.02em; line-height:1;
  color:var(--ypr-ink) !important; background:var(--ypr-yellow) !important; border:0 !important; border-radius:999px;
  box-shadow:0 6px 16px rgba(236,168,3,.24) !important; text-shadow:none !important; cursor:pointer;
  transition:transform .18s var(--ypr-ease), background .18s var(--ypr-ease), box-shadow .18s var(--ypr-ease);
}
.wp-core-ui.login #login #wp-submit:hover,
.wp-core-ui.login #login .button-primary:hover{
  background:var(--ypr-yellow-lt) !important; color:var(--ypr-ink) !important; transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(236,168,3,.3) !important;
}
.wp-core-ui.login #login #wp-submit:focus,
.wp-core-ui.login #login .button-primary:focus{
  background:var(--ypr-yellow) !important; color:var(--ypr-ink) !important;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ypr-violet) !important; outline:2px solid transparent;
}
.wp-core-ui.login #login #wp-submit:active,
.wp-core-ui.login #login .button-primary:active{
  background:#d99a02 !important; color:var(--ypr-ink) !important; transform:translateY(0); box-shadow:none !important;
}

/* Links under the card */
.login #login #nav, .login #login #backtoblog{ padding:0; text-align:center; font-size:13.5px; line-height:1.5; }
.login #login #nav{ margin:22px 0 0; }
.login #login #backtoblog{ margin:10px 0 0; word-wrap:break-word; }
.login #login #nav a, .login #login #backtoblog a, .login #login .privacy-policy-page-link a{
  color:var(--ypr-on-dark); text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px; border-radius:4px;
  transition:color .18s var(--ypr-ease), text-decoration-color .18s var(--ypr-ease);
}
.login #login #backtoblog a, .login #login .privacy-policy-page-link a{ color:var(--ypr-on-dark-muted); }
.login #login #nav a:hover, .login #login #backtoblog a:hover, .login #login .privacy-policy-page-link a:hover,
.login #login #nav a:focus, .login #login #backtoblog a:focus, .login #login .privacy-policy-page-link a:focus{
  color:var(--ypr-yellow); text-decoration-color:currentColor;
}
.login #login #nav a:focus-visible, .login #login #backtoblog a:focus-visible, .login #login .privacy-policy-page-link a:focus-visible{
  outline:2px solid var(--ypr-yellow); outline-offset:3px;
}
.login #login .privacy-policy-page-link{ margin:18px 0 0; width:auto; text-align:center; font-size:12.5px; }

/* Language switcher (only when several locales are installed) — keep neutral */
.login .language-switcher{ grid-column:2; grid-row:2; justify-self:center; margin:0; padding:0 16px 14px; color:var(--ypr-on-dark); text-align:center; }
.login .language-switcher label{ color:var(--ypr-on-dark-muted); font-size:12.5px; }
.login .language-switcher select{ min-height:34px; border-radius:8px; border-color:#c9c3cf; font-family:var(--ypr-font-body); }
.wp-core-ui.login .language-switcher .button{ border-radius:999px; color:var(--ypr-on-dark); border-color:rgba(255,255,255,.4); background:transparent; }

/* Powered by optimistic. — quiet, pinned to the foot of the form column */
.login .ypr-powered{
  grid-column:2; grid-row:3; justify-self:center; align-self:end;
  display:inline-flex; align-items:center; gap:9px; margin:0; padding:16px 16px 22px; border-radius:6px;
  font-size:12px; font-weight:500; letter-spacing:.02em; line-height:1; color:#bfb6c2; text-decoration:none;
  transition:color .18s var(--ypr-ease);
}
.login .ypr-powered img{ display:block; width:118px; height:auto; }
.login .ypr-powered:hover, .login .ypr-powered:focus-visible{ color:#fff; }
.login .ypr-powered:focus-visible{ outline:2px solid var(--ypr-yellow); outline-offset:2px; }
/* Brush-script tagline shown only on narrow screens (the hero carries it on wide ones) */
.login .ypr-foot-tagline{ display:none; }

/* ---------- Session-expired re-auth modal (wp-auth-check iframe, ~380px wide) ---------- */
body.login.interim-login{ display:block; min-height:0; padding:12px 0; background:linear-gradient(180deg, #7a0676 0%, #3a0338 100%); }
.login.interim-login .ypr-hero, .login.interim-login .ypr-foot-tagline, .login.interim-login .ypr-powered{ display:none; }
.login.interim-login #login{ width:min(360px,100% - 24px); margin:0 auto; padding:12px 0; animation:none; }
.login.interim-login #login h1 a{ height:56px; background-size:auto 70px; }

/* ---------- Motion ---------- */
@keyframes ypr-rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes ypr-swirl-spin{ to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){
  .login .ypr-hero__swirl, .login .ypr-hero__tag, .login .ypr-hero__copy, .login #login{ animation:none; }
  .login #login form .input, .login #login .button.wp-hide-pw, .login #login .wp-tooltip .wp-tooltip__toggle,
  .login #login .message a, .login #login .notice a, .login #login .success a,
  .login #login #nav a, .login #login #backtoblog a, .login #login .privacy-policy-page-link a, .login .ypr-powered,
  .wp-core-ui.login #login #wp-submit, .wp-core-ui.login #login .button-primary{ transition:none; }
  .wp-core-ui.login #login #wp-submit:hover, .wp-core-ui.login #login .button-primary:hover{ transform:none; }
}

/* ---------- Narrow screens: hide the side art, one centred column ---------- */
@media (max-width: 859.98px){
  body.login{
    display:flex; flex-direction:column; align-items:center;
    background:linear-gradient(180deg, #7a0676 0%, #3a0338 40%, #16151a 100%);
  }
  .login .ypr-hero{ display:none; }
  .login #login{ width:min(420px,100% - 32px); margin:0 auto; padding:32px 0 16px; }
  .login #login h1 a{ height:64px; background-size:auto 80px; }
  .login #login form{ padding:22px 20px 20px; }
  .login .language-switcher{ margin:0; }
  .login .ypr-foot-tagline{
    display:block; margin:auto 16px 0; padding-top:28px;
    font:400 28px/1.1 var(--ypr-font-script); color:var(--ypr-yellow); text-align:center; transform:rotate(-2deg);
  }
  .login .ypr-powered{ margin-top:0; padding:14px 16px 22px; }
}
@media (max-width: 859.98px) and (max-height: 700px){
  .login #login{ padding-top:20px; }
}