/* The login page (partners/login.php, plan docs/superpowers/plans/2026-11-02-login-accounts.md, pictures docs/mockups/login-accounts/).
   Solid and dark, after the user's references ("avoid the glassmorphism", "I need the dark theme"): every surface in the sheet is one
   flat colour, with soft filled fields and round buttons; no see-through fills, gradients, glows or blur. Google and the code button
   are the big ones (user: "few people will use password"). It is a document of its own, so WoodMart's CSS and partners.css aren't
   here: this file also draws WooCommerce's notices. Loaded after login-code.css, so a tie with its selectors goes to these rules.
   Fields are 16px or more (iPhones zoom otherwise). No entry animation, filter or running transform on a box holding fields: iPhone
   Safari scrolls away from a focused field inside one. --t2 reads 8.25:1 on the sheet and 7.09:1 on the soft fill. */
.db-login{--bg:#211632;--soft:#2E2243;--soft2:#3A2D52;--t:#fff;--t2:#B9B0C9;--line:#43365C;--ul:#B99BE8;margin:0;min-height:100vh;min-height:100dvh;background:#1E1030;color:var(--t);color-scheme:dark;font:400 15px/1.5 "Geist",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}
.db-login *,.db-login *::before,.db-login *::after{box-sizing:border-box}
.db-login :is(a,button,summary):focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Phones: the photo, then a sheet that overlaps it by 24px. Past 480px the same column, centred. */
.db-card{display:flex;flex-direction:column;width:100%;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto}
.db-photo{position:relative;flex:none;height:clamp(262px,70vw,336px);background:#1E1030}

/* The photos have words on them: each one's position keeps its whole sign in the part the sheet doesn't cover. */
.db-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.db-slide.is-on{opacity:1}
.db-slide-1{object-position:50% 44%}
.db-slide-2{object-position:50% 62%}
.db-slide-3{object-position:50% 21%}

.db-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
.db-logo{display:block;width:auto;height:26px}
.db-back{flex:none;padding:7px 13px;border-radius:99px;background:#1E1030;color:#fff;font-size:13px;line-height:1.5;text-decoration:none}
.db-back:hover{background:var(--soft)}
.db-dots{position:absolute;right:0;bottom:30px;left:0;display:flex;justify-content:center;gap:6px}
.db-dots i{width:22px;height:4px;border-radius:9px;background:rgba(255,255,255,.4)}
.db-dots i.is-on{background:#fff}

.db-sheet{position:relative;flex:1;margin-top:-24px;padding:24px 20px 20px;border-radius:24px 24px 0 0;background:var(--bg)}
.db-buzzy{position:absolute;top:-52px;right:20px;width:66px;height:auto}

/* The heading. :has() swaps it with the step; a browser without it stays on the first, and shows every way in, which still works.
   With login-code.php rolled back there is no .db-code, and the password box stays beside Google and the starts. */
.db-login .pd-auth-h{margin:0 0 16px;text-align:center;font:600 clamp(26px,8vw,30px)/1.05 "Geist",system-ui,sans-serif;letter-spacing:-.03em}
.db-h-code,.db-h-pw{display:none}
.pd-auth-pane:has(.db-code):has(.pd-pw[open]) :is(.pd-google,.db-code,.db-h-main){display:none}
.pd-auth-pane:has(.db-code):has(.pd-pw[open]) .db-h-pw{display:inline}
.pd-auth-pane:has([data-step="code"]:not([hidden])) :is(.pd-google,.pd-pw,.db-legal,.db-h-main){display:none}
.pd-auth-pane:has([data-step="code"]:not([hidden])) .db-h-code{display:inline}
.pd-auth:has(.db-code):has(.pd-pw[open]) .pd-start{display:none}
.pd-auth:has([data-step="code"]:not([hidden])) .pd-start{display:none}

.db-login .pd-auth-sub{margin:0 0 12px;color:var(--t2);text-align:center}
.db-login .pd-role{margin:-8px 0 14px;color:var(--t2);font-size:14px;text-align:center}
.db-login .pd-role a,.db-login .pd-auth-back a,.db-fin-who a,.db-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Continue with Google. */
.db-login a.pd-google-btn{display:flex;align-items:center;gap:10px;height:62px;padding:0 20px;border-radius:99px;background:#fff;color:#16121F;font-size:clamp(15px,4.6vw,17px);font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,transform .2s cubic-bezier(.32,.72,0,1)}
.db-login a.pd-google-btn:hover{background:#EFEBF5}
.db-login .pd-google-disc{display:grid;flex:none;place-items:center;width:24px;height:24px}
.db-login .pd-google-t{flex:1;min-width:0;text-align:center}
.db-login .pd-google-arrow{flex:none;width:18px;height:18px;fill:none;stroke:#5C5568;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.db-login .pd-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--t2);font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.db-login .pd-or::before,.db-login .pd-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* Fields: the email box here and in every other step. */
.db-login .pd-auth-form{display:grid;gap:12px}
.db-login .pd-field{display:grid;gap:4px;margin:0}
.db-login .pd-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* the placeholder says it */
.db-login .pd-field input{display:block;width:100%;height:58px;margin:0;padding:0 16px;border:0;border-radius:16px;background:var(--soft);color:var(--t);font:400 16px "Geist",system-ui,sans-serif;box-shadow:none}
.db-login .pd-field input::placeholder{color:var(--t2);opacity:1}
.db-login .pd-field input[aria-invalid="true"]{outline:2px solid #FFB4AB;outline-offset:-2px}
.db-login .pd-field input:focus{outline:2px solid var(--ul);outline-offset:-2px} /* an outline, so the ring moves nothing and sits over autofill's paint */
.db-login .pd-field input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;box-shadow:inset 0 0 0 60px #2E2243}
.db-err{color:#FFB4AB;font-size:13.5px;line-height:1.35}
.db-fin-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.db-fin-who{margin:12px 0 0;color:var(--t2);font-size:13.5px;text-align:center;overflow-wrap:anywhere}

.db-login .pd-btn{display:flex;align-items:center;justify-content:center;width:100%;height:62px;margin:0;padding:0 18px;border:0;border-radius:99px;background:#8224E3;color:#fff;font:600 17px/1 "Geist",system-ui,sans-serif;cursor:pointer;transition:background-color .15s ease,transform .2s cubic-bezier(.32,.72,0,1)}
.db-login .pd-btn:not(:disabled):hover{background:#9036F0}
.db-login .pd-btn:disabled{opacity:.6;cursor:default}
@media (prefers-reduced-motion:no-preference){
	.db-login a.pd-google-btn:active,.db-login .pd-btn:not(:disabled):active{transform:scale(.98)} /* only the button itself: it holds no field */
}

/* The password step: its <summary> reads "Use a password instead" under the code button; once open, "Use a code instead" on the
   last row of the form, across from Forgot password? (a <summary> can only come first, so it is placed there). */
.db-login .pd-pw{position:relative}
.db-login .pd-pw summary{display:block;width:fit-content;margin:14px auto 0;color:var(--t2);font-size:13px;list-style:none;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;cursor:pointer}
.db-login .pd-pw summary::-webkit-details-marker{display:none}
.db-pw-open,.pd-pw[open] .db-pw-closed{display:none}
.pd-pw[open] .db-pw-open{display:inline}
.db-login .pd-pw[open] summary{position:absolute;right:0;bottom:0;margin:0;color:var(--t);font-size:14px;text-decoration-color:var(--ul)}
.db-login .pd-auth-row{display:flex;font-size:14px}
.db-login .pd-auth-row a,.db-login a.devt-link{color:var(--t);text-decoration:underline;text-decoration-color:var(--ul);text-underline-offset:4px}
.db-login .pd-auth-back{margin:14px 0 0;font-size:14px;text-align:center}

.db-legal{margin:12px 0 0;color:var(--t2);font-size:12px;text-align:center}
.db-login .pd-start{display:flex;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.db-login .pd-start-row{flex:1;min-width:0;padding:12px 14px;border-radius:16px;background:var(--soft);color:var(--t2);font-size:13px;line-height:1.3;text-decoration:none;transition:background-color .15s ease}
.db-login .pd-start-row:hover{background:var(--soft2)}
.db-login .pd-start-row span{display:block}
.db-login .pd-start-row b{color:var(--t);font-size:16px;font-weight:600}

/* A guest at /my-account/wishlist/ gets this line over the login (wishlist.php; site.css, which styles it elsewhere, isn't here) */
.db-login .db-wish-login{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px;color:var(--t2);font-size:14px}
.db-login .db-wish-login svg{flex:none;width:20px;height:20px;fill:var(--ul)}

/* WooCommerce's notices */
.db-login :is(.woocommerce-error,.woocommerce-message,.woocommerce-info){margin:0 0 14px;padding:12px 14px;border-radius:16px;background:var(--soft);color:#fff;font-size:14px;line-height:1.45;list-style:none;overflow-wrap:anywhere}
.db-login .woocommerce-error{background:#4A1D24;color:#FFD9D4}
.db-login :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.db-login :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) li{margin:0}

/* You're all set (partners/all-set.php). Flat, after the user's references: confetti round a scalloped badge, one line, Done at the foot.
   The confetti is held and clipped by the top block, above the words, so the two can't meet. That block is never taller than it is wide,
   and every shape sits in the middle 300 of the drawing's 400, so none is cut at the sides. Its one drop is transform and opacity only,
   and it is still under reduced motion. */
.db-allset{display:flex;flex:1;flex-direction:column;min-width:0}
.db-allset-top{position:relative;display:flex;flex:none;align-items:flex-end;justify-content:center;height:clamp(200px,min(100vw,50vh),430px);height:clamp(200px,min(100vw,50dvh),430px);margin:-24px -20px 16px;padding-bottom:12px;overflow:hidden;pointer-events:none}
.db-confetti{position:absolute;inset:0;display:block;width:100%;height:100%}
.db-badge{position:relative;display:block;width:92px;height:92px}
.db-allset .pd-auth-h{margin-bottom:8px;font-size:clamp(30px,9vw,36px)}
.db-allset .pd-auth-sub{margin-bottom:24px;text-wrap:balance}
.db-allset .pd-btn{flex:none;margin-top:auto;text-decoration:none}
@media (prefers-reduced-motion:no-preference){
	.db-confetti g{animation:db-confetti-drop .8s cubic-bezier(.32,.72,0,1) both}
	.db-confetti g:nth-of-type(2){animation-delay:.05s}
	.db-confetti g:nth-of-type(3){animation-delay:.1s}
	.db-confetti g:nth-of-type(4){animation-delay:.15s}
	.db-confetti g:nth-of-type(5){animation-delay:.2s}
}
@keyframes db-confetti-drop{from{opacity:0;transform:translateY(-48px)}to{opacity:1;transform:none}}
/* Phones: the whole screen, no photo or Buzzy. */
@media (max-width:899.98px){
	.db-login.is-done :is(.db-photo,.db-buzzy){display:none}
	.db-login.is-done .db-sheet{display:flex;flex-direction:column;margin-top:0;padding-bottom:24px;border-radius:0}
}

/* Computers: one card, the photo on the left, on night. Buzzy stays with the phones. */
@media (min-width:900px){
	.db-login{display:grid;place-items:center;box-sizing:border-box;padding:24px}
	.db-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:980px;min-height:0;margin:0;border-radius:28px;overflow:hidden;background:var(--bg)}
	.db-photo{height:auto;min-height:620px}
	.db-login .db-slide{object-position:50% 50%}
	.db-dots{bottom:20px}
	.db-sheet{display:flex;flex-direction:column;justify-content:center;margin:0;padding:44px 48px;border-radius:0}
	.db-sheet>*{min-width:0}
	.db-buzzy{display:none}
	.db-login .pd-auth-h{font-size:38px}
	.db-allset-top{height:auto;aspect-ratio:4/3;margin:-44px -48px 16px}
}
@media (prefers-reduced-motion:reduce){
	.db-login *{transition:none!important}
	.db-dots{display:none} /* the photos don't change */
}