/* Sign-in, create-account and reset screens: WordPress's wp-login.php markup dressed as the D mockups
   (d-sign-in / d-create-account / d-reset-password). Core's own login.css is dequeued (inc/login.php),
   so this file also supplies the few utility rules core's styles normally give. */

/* ---------- utilities core normally provides ---------- */
.oberbuilt-login .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oberbuilt-login .hide-if-no-js { display: none; }
.oberbuilt-login.js .hide-if-no-js { display: inline-flex; }
.oberbuilt-login .dashicons { display: none; }

/* ---------- layout: the mockup's intro / form / aside grid ---------- */
.oberbuilt-login__grid { grid-template-areas: "k" "h" "say" "form" "aside"; row-gap: 0; }
.oberbuilt-login__grid > .oberbuilt-login__say { margin: 18px 0 28px; }
.oberbuilt-login__aside { margin-top: 28px; }
.oberbuilt-login__k { grid-area: k; }
.oberbuilt-login__grid > h1.screen-reader-text { grid-area: h; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.03em; color: var(--v-fg); max-width: 12ch; text-wrap: balance; margin: 0; }
.oberbuilt-login__grid > h1.screen-reader-text::after { content: "."; }
.oberbuilt-login__say { grid-area: say; margin: 0; }
.oberbuilt-login #login { grid-area: form; position: relative; width: 100%; max-width: 520px; display: grid; gap: 20px; padding: clamp(22px, 3vw, 34px); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow: var(--v-card); }
.oberbuilt-login__aside { grid-area: aside; }
@media (min-width: 900px) {
  .oberbuilt-login__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "k form" "h form" "say form" "aside form"; grid-template-rows: auto auto auto 1fr; row-gap: 0; column-gap: clamp(48px, 7vw, 120px); align-items: start; }
  .oberbuilt-login__k { padding-top: clamp(8px, 2vw, 32px); }
  .oberbuilt-login #login { justify-self: end; max-width: 480px; }
  .oberbuilt-login__aside { align-self: start; margin-top: 0; padding-top: 36px; }
  .oberbuilt-login__grid > .oberbuilt-login__say { margin-bottom: 0; }
}

/* ---------- inside the card ---------- */
.oberbuilt-login #login > h1.wp-login-logo, .oberbuilt-login #backtoblog, .oberbuilt-login .privacy-policy-page-link, .oberbuilt-login .language-switcher { display: none; }
.oberbuilt-login #login form { display: grid; gap: 20px; margin: 0; padding: 0; background: none; box-shadow: none; border: 0; }
.oberbuilt-login #login form > p, .oberbuilt-login .user-pass-wrap, .oberbuilt-login .obsite-field { display: grid; gap: 7px; margin: 0; }
.oberbuilt-login #login label { font-size: 14px; color: var(--v-fg); font-weight: 600; }
.oberbuilt-login #login input[type="text"], .oberbuilt-login #login input[type="email"], .oberbuilt-login #login input[type="password"] {
  font: inherit; font-size: 16px; color: var(--v-fg); background: rgba(0,0,0,.24); border: .5px solid rgba(255,255,255,.40); border-radius: 8px; padding: 12px 13px; min-height: 46px; width: 100%; box-sizing: border-box; }
.oberbuilt-login #login input[type="text"]:hover, .oberbuilt-login #login input[type="email"]:hover, .oberbuilt-login #login input[type="password"]:hover { border-color: rgba(255,255,255,.58); }
.oberbuilt-login #login input:focus-visible, .oberbuilt-login #login button:focus-visible, .oberbuilt-login #login a:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 2px; }
.oberbuilt-login .wp-pwd { position: relative; }
.oberbuilt-login .wp-pwd input { padding-right: 84px; }
.oberbuilt-login .wp-hide-pw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 34px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 6px; cursor: pointer;
  align-items: center; justify-content: center; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg-2); background: rgba(255,255,255,.05); }
.oberbuilt-login .wp-hide-pw::after { content: "Show"; }
/* The visible label follows core's own state (aria-label), so it always matches what a screen reader hears. */
.oberbuilt-login .wp-hide-pw[aria-label="Hide password"]::after { content: "Hide"; }
.oberbuilt-login .wp-hide-pw:hover { color: var(--v-fg); background: rgba(255,255,255,.09); }
.oberbuilt-login .forgetmenot { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.oberbuilt-login .forgetmenot label { font-weight: 400; color: var(--v-fg-2); }
.oberbuilt-login .wp-tooltip__toggle { min-width: 28px; min-height: 28px; border-radius: 50%; border: .5px solid var(--v-line-2); background: transparent; color: var(--v-fg-2); cursor: pointer; }
.oberbuilt-login .wp-tooltip__toggle::after { content: "?"; font: 600 13px/1 var(--font-sans); }
.oberbuilt-login .wp-tooltip__bubble { max-width: 280px; padding: 10px 12px; border-radius: 8px; background: var(--v-bg-2, #15232F); color: var(--v-fg-2); border: .5px solid var(--v-line-2); font-size: 14px; }
.oberbuilt-login #login p.submit { margin: 4px 0 0; }
.oberbuilt-login #login input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 10px; border: 0; cursor: pointer; width: 100%; min-height: 48px;
  font: 600 15px/1 var(--font-sans); background: var(--v-cyan); color: #06131C; box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 8px 24px -10px rgba(0,184,212,.7); }
.oberbuilt-login #login input[type="submit"]:hover { background: #2DD4E8; }
.oberbuilt-login #nav { margin: 0; font-size: 15px; color: var(--v-fg-3); border-top: .5px solid var(--v-line-2); padding-top: 18px; }
.oberbuilt-login #nav a { display: inline-block; padding: 4px 0; font-weight: 600; }
.oberbuilt-login .description, .oberbuilt-login .indicator-hint { font-size: 13px; color: var(--v-fg-3); margin: 0; }
/* "Registration confirmation will be emailed to you." is not true here (the person chooses a password and is signed in). */
.oberbuilt-login #reg_passmail { display: none; }
/* Remember me: the mockup's plain hint replaces core's pop-up tip. */
.oberbuilt-login .forgetmenot .wp-tooltip { display: none; }
.oberbuilt-login #loginform .forgetmenot { order: 1; }
.oberbuilt-login #loginform .oberbuilt-login__remember-hint { order: 2; margin: -14px 0 0 32px; }
.oberbuilt-login #loginform p.submit { order: 3; }
/* Two-factor screen: the secondary action looks secondary. */
.oberbuilt-login #loginform .two-factor-email-resend input[type="submit"], .oberbuilt-login #loginform input.button[name*="resend"] { background: transparent; color: var(--v-fg); box-shadow: 0 0 0 1px var(--v-line-2) inset; }
/* wp-admin's session-expired modal: just the card. */
.oberbuilt-login--interim .oberbuilt-login__grid, .oberbuilt-login--interim { display: block; }
.oberbuilt-login--interim #login { max-width: none; margin: 0; }
.oberbuilt-login--interim h1.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- messages and errors (core's #login_error / .message) ---------- */
.oberbuilt-login #login_error, .oberbuilt-login .message, .oberbuilt-login .notice { display: grid; gap: 4px; margin: 0; padding: 14px 16px 14px 46px; border-radius: 10px; position: relative; font-size: 14px; line-height: 1.55; color: var(--v-fg-2); border: 0; }
.oberbuilt-login #login_error { background: var(--da-err-bg, rgba(255,138,128,.08)); box-shadow: 0 0 0 1px rgba(255,138,128,.35) inset; }
.oberbuilt-login #login_error::before { content: "!"; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-sans); color: #1A0B09; background: var(--da-err, #FF8A80); }
.oberbuilt-login .message, .oberbuilt-login .notice-info, .oberbuilt-login .notice-success { background: rgba(0,184,212,.07); box-shadow: 0 0 0 1px rgba(98,226,239,.3) inset; }
.oberbuilt-login .message::before, .oberbuilt-login .notice-info::before, .oberbuilt-login .notice-success::before { content: "i"; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-sans); color: #06131C; background: var(--v-cyan); }
.oberbuilt-login #login_error a, .oberbuilt-login .message a { display: inline-block; padding: 2px 0; }

/* ---------- registration extras from the OberBuilt Site plugin ---------- */
.oberbuilt-login .obsite-check { display: grid; gap: 4px; margin: 0; }
.oberbuilt-login .obsite-check label { display: flex; align-items: flex-start; gap: 12px; min-height: 32px; font-weight: 400; color: var(--v-fg-2); }
.oberbuilt-login .obsite-check .v-field__hint { padding-left: 32px; }
.oberbuilt-login .obsite-err { margin: 0; font-size: 13px; color: var(--da-err, #FF8A80); }

/* Caps-lock warning (added by core's user-profile.js, shown with an inline display only while caps lock is on). */
.oberbuilt-login .caps-warning { display: none; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--v-fg-2); }
.oberbuilt-login .caps-icon svg { width: 16px; height: 18px; fill: currentColor; stroke: currentColor; }

/* Create account: the mockup's field order (name first). */
.oberbuilt-login #registerform .obsite-field--name { order: -1; }
.oberbuilt-login #registerform > p[hidden] { display: none; }
.oberbuilt-login #registerform .submit { order: 10; }
.oberbuilt-login #registerform .obsite-check { order: 9; }
.oberbuilt-login .message.register { display: none; } /* Core's "Register For This Site" box: the page says it already. */