/*
 * The new look for the five signed-out screens, 2026-11-08: the client sign in, the team door, /hello/, /welcome/
 * and /request-access/. Loaded only when portal_new_auth_look() is on (plugin/includes/auth-look.php), on top of
 * assets/public-kit.css, whose bento card, vignette and tint classes it reuses as they are.
 *
 * What lives here and not in the kit: the page shell, the layouts the form card sits in, wp-login's
 * own markup restyled, and the three vignette contents the sign in bento and /welcome/ share. The button (pk-btn),
 * field (pk-field), form card (pk-form-card), divider (pk-or), page title (pk-h1) and every colour (--pk-*) are the
 * kit's since 2026-11-08, shared with /prices/, the call pages, the booking picker and the playbook.
 *
 * Every rule is under .pa-body or a pa- class, so nothing here can reach a page that has not opted in. wp-login
 * carries core's own stylesheet, so the rules that style core's markup sit under body.pa-body #login for the weight
 * to win without !important.
 */
html{background:var(--pk-ground)}
body.pa-body{
	margin:0;min-height:100vh;min-height:100dvh;background:var(--pk-ground);color:var(--pk-ink);
	font-family:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;
	-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden;caret-color:var(--pk-accent);
}
body.pa-body *,body.pa-body *::before,body.pa-body *::after{box-sizing:border-box}
:where(body.pa-body) :where(h1,h2,h3,p,ul,ol,li,figure){margin:0;padding:0}
:where(body.pa-body) :where(ul,ol){list-style:none}
:where(body.pa-body) :where(img){display:block;max-width:100%}
body.pa-body ::selection{background:var(--pk-gold);color:var(--pk-ink)}
body.pa-body :focus-visible{outline:2px solid var(--pk-accent);outline-offset:3px;border-radius:6px}
body.pa-body mark{background:none;color:var(--pk-accent)}

/* The header row is the kit's (pk-top, portal_kit_top()) since 2026-11-08. */

/* Page */
.pa-main{max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,56px) 16px 64px;display:flex;flex-direction:column;align-items:center}
.pa-sub{margin:12px auto 0;max-width:44ch;text-align:center;font-size:17px;line-height:1.6;color:var(--pk-muted);text-wrap:balance}

/* The two ways the kit's form card sits: alone and centred, or beside the bento */
.pa-solo{width:100%;margin-top:32px;display:flex;justify-content:center}
.pa-side{width:100%;max-width:1080px;margin-top:32px;display:grid;grid-template-columns:420px minmax(0,1fr);gap:16px;align-items:stretch}
.pa-side .pk-form-card{max-width:none}
.pa-side--team{align-items:center}

/* The team call (2026-11-08): the shared call vignette in its team only mode, vignettes.css doing the tiles. Ross is
   the part's own .self span in his corner cell, so he gets the ring here, the tiles get it from vignettes.css. */
.pa-tcall{padding:10px}
.pa-tcall .stage{background:#1c1d2c}
.pa-tcall .self::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px transparent;transition:box-shadow .25s ease;pointer-events:none}
.pa-tcall .self.is-talk::after{box-shadow:inset 0 0 0 3px var(--pk-accent)}
.pa-note{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--pk-muted)}
.pa-note:empty{display:none}

/* wp-login: core's own markup, restyled. The form, nonce, redirect_to and the password toggle are all core's, so the
   inputs and #wp-submit cannot carry pk-field or pk-btn; they repeat the kit's values from the kit's tokens instead. */
body.pa-body #login{width:100%;max-width:none;padding:0;margin:0;position:static}
body.pa-body #login h1,body.pa-body h1.screen-reader-text,body.pa-body h1.wp-login-logo{display:none}
body.pa-body .language-switcher,body.pa-body .privacy-policy-page-link,body.pa-body #backtoblog{display:none}
body.pa-body #login form{margin:0;padding:0;border:0;box-shadow:none;background:none;overflow:visible}
body.pa-body #login label{display:block;margin:0 0 6px;font-size:14px;font-weight:600;line-height:1.4;color:var(--pk-ink);text-transform:none;letter-spacing:0}
body.pa-body #login form p{margin:0 0 16px}
body.pa-body #login .user-pass-wrap{margin:0 0 16px}
body.pa-body #login input[type=text],
body.pa-body #login input[type=email],
body.pa-body #login input[type=password],
body.pa-body #login input.input{
	width:100%;height:auto;min-height:52px;margin:0;padding:12px 16px;border:1.5px solid var(--pk-line);border-radius:14px;
	background:var(--pk-field);color:var(--pk-ink);font-family:inherit;font-size:16px;line-height:1.4;box-shadow:none;
}
body.pa-body #login input[type=text]:focus,
body.pa-body #login input[type=email]:focus,
body.pa-body #login input[type=password]:focus{outline:none;border-color:var(--pk-accent);box-shadow:0 0 0 4px rgba(244,93,51,.14);background:var(--pk-field-on)}
/* A saved password paints the field with the browser's own colours and ignores background, so cover it. */
body.pa-body #login input:-webkit-autofill,
body.pa-body #login input:-webkit-autofill:hover,
body.pa-body #login input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--pk-field) inset;box-shadow:0 0 0 1000px var(--pk-field) inset;-webkit-text-fill-color:var(--pk-ink);caret-color:var(--pk-ink)}
body.pa-body #login .wp-pwd{position:relative;margin:0}
body.pa-body #login .wp-pwd input[type=password],body.pa-body #login .wp-pwd input[type=text]{padding-right:56px}
body.pa-body #login button.button.wp-hide-pw{
	position:absolute;top:50%;right:8px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
	width:36px;min-width:36px;height:36px;min-height:0;padding:0;margin:0;border:0;border-radius:10px;background:none;box-shadow:none;color:var(--pk-muted);cursor:pointer;
}
body.pa-body #login button.button.wp-hide-pw:hover{background:rgba(28,29,44,.06);color:var(--pk-ink)}
body.pa-body #login button.button.wp-hide-pw .dashicons{width:20px;height:20px;font-size:20px;line-height:20px}
/* Remember me on the left, Lost your password on the right (script in portal_auth_new_login_close() moves the link). */
body.pa-body #login .forgetmenot{display:flex;align-items:center;gap:8px;float:none;margin:2px 0 20px;font-size:14px}
body.pa-body #login .forgetmenot label{display:inline;margin:0;font-weight:500;color:var(--pk-soft)}
body.pa-body #login input[type=checkbox]{-webkit-appearance:checkbox;appearance:auto;width:18px;height:18px;min-height:0;margin:0;border-radius:4px;accent-color:var(--pk-ink);box-shadow:none}
body.pa-body #login input[type=checkbox]::before{display:none}
body.pa-body #login .pa-lost{margin-left:auto;color:var(--pk-muted);font-weight:600;text-decoration:none}
body.pa-body #login .pa-lost:hover{color:var(--pk-ink);text-decoration:underline}
body.pa-body #login p.submit{margin:0}
body.pa-body #login #wp-submit{
	float:none;display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:46px;padding:0 22px;border:0;border-radius:999px;
	background:var(--pk-gold);color:var(--pk-ink);font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;text-shadow:none;box-shadow:none;cursor:pointer;transition:box-shadow .2s ease;
}
body.pa-body #login #wp-submit:hover{box-shadow:var(--pk-lift);background:var(--pk-gold)}
/* Any other core button (the reset screen's Generate password), kept working and quietly styled. */
body.pa-body #login .button:not(#wp-submit):not(.wp-hide-pw){
	background:#fff;border:1.5px solid var(--pk-line);border-radius:999px;color:var(--pk-ink);box-shadow:none;font-family:inherit;font-size:14px;font-weight:600;height:auto;padding:10px 16px;
}
body.pa-body #login #nav{margin:16px 0 0;padding:0;text-align:center;font-size:14px;width:auto}
body.pa-body #login #nav a{color:var(--pk-accent);font-weight:600;text-decoration:none}
body.pa-body #login #nav a:hover{text-decoration:underline}
/* Banners stay above the form and travel with it, because they are inside the same card. */
body.pa-body #login #login_error,
body.pa-body #login .message,
body.pa-body #login .success{
	margin:0 0 18px;padding:12px 14px;border:1px solid var(--pk-line);border-radius:14px;background:#faf7f1;box-shadow:none;
	color:var(--pk-soft);font-size:14px;line-height:1.5;text-align:left;
}
body.pa-body #login #login_error{background:#fdecea;border-color:rgba(222,81,70,.45);color:#8f2c23}
body.pa-body #login .pb-login-note{background:rgba(254,206,17,.18);border-color:rgba(254,206,17,.6);color:#6b5a10}
body.pa-body #login #pass-strength-result{margin:12px 0;border-radius:10px;font-size:13px}

/* The three tinted cards. The shell is the kit's; these are what is drawn inside them. */
.pa-inside{width:100%}
.pa-inside .pk-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
.pa-inside .pk-card{grid-column:span 1;padding:22px;gap:14px;border-radius:24px}
.pa-inside .pk-card h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.pa-inside .pk-card p{font-size:14.5px;margin-top:4px}
.pa-inside .pk-vignette{padding:12px 14px}
.pa-stages{display:grid;gap:7px}
.pa-stages li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;font-size:13px}
.pa-stages i{width:16px;height:16px;border-radius:50%;background:var(--pk-seg1);display:grid;place-items:center;color:#fff;font-style:normal;font-size:10px;font-weight:800}
.pa-stages li.now i{background:var(--pk-accent)}
.pa-stages li.next i{background:var(--pk-track)}
.pa-stages span:last-child{color:var(--pk-muted);font-size:12px}
.pa-sw{display:flex;gap:6px;margin-bottom:10px}
.pa-sw b{flex:1;height:28px;border-radius:8px}
.pa-aa{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--pk-muted)}
.pa-aa strong{font-size:30px;font-weight:300;color:var(--pk-ink);letter-spacing:-.02em;line-height:1}
.pa-inv{display:grid;gap:6px}
.pa-inv li{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.pa-inv em{font-style:normal;font-weight:700;font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--pk-t1);color:#1f6b45}
.pa-inv em.due{background:#fff3c4;color:#6b5300}
/* Beside the form: projects across the top, the other two below. */
.pa-side .pa-inside .pk-bento{grid-template-columns:repeat(2,minmax(0,1fr));height:100%}
.pa-side .pa-inside .pk-card:first-child{grid-column:span 2;flex-direction:row;align-items:center;gap:24px}
.pa-side .pa-inside .pk-card:first-child > div:first-child{flex:1}
.pa-side .pa-inside .pk-card:first-child .pk-vignette{flex:0 0 58%;margin-top:0}

/* Request access: what happens next */
.pa-next{width:100%;max-width:448px;margin-top:16px}
.pa-next .pk-card{padding:22px 24px;gap:14px}
.pa-next h3{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.pa-steps{display:grid;gap:12px;counter-reset:pa-s}
.pa-steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:14.5px;color:var(--pk-soft)}
.pa-steps li::before{counter-increment:pa-s;content:counter(pa-s);width:30px;height:30px;border-radius:50%;background:var(--pk-ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.pa-steps b{display:block;color:var(--pk-ink);font-size:15px}

/* Hello */
.pa-hello{min-height:calc(100vh - 90px);min-height:calc(100dvh - 90px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 80px;text-align:center}
.pa-hello h1{font-size:clamp(56px,9vw,112px);font-weight:300;letter-spacing:-.04em;line-height:1}
.pa-hello p{margin-top:14px;font-size:18px;color:var(--pk-muted)}
.pa-bar{width:220px;height:8px;border-radius:999px;background:var(--pk-track);margin-top:28px;overflow:hidden}
.pa-bar span{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#9fd2ae,#a9d0f0,#c3bbef,#f7b9a1)}
@media (prefers-reduced-motion:no-preference){
	.pa-bar span{width:6%;animation:pa-fill 2.9s cubic-bezier(.3,.1,.3,1) forwards}
}
@keyframes pa-fill{to{width:100%}}

/* Welcome */
.pa-whero{background:#fff;border-radius:0 0 48px 48px;margin:0 max(12px,calc((100% - 1440px) / 2)) 12px;padding:0 0 clamp(56px,7vw,88px)}
.pa-win{max-width:900px;margin:clamp(40px,6vw,72px) auto 0;text-align:center;padding:0 16px}
.pa-win .pk-h1{font-size:clamp(44px,7vw,84px);letter-spacing:-.035em;line-height:1.02}
.pa-win .pa-sub{max-width:58ch;font-size:18px}
.pa-cta{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pa-welcome-page .pk-sheet .pa-inside{margin-top:0}
.pa-wdark{background:var(--pk-ink);color:#fff;border-radius:48px;margin:0 max(12px,calc((100% - 1440px) / 2)) 12px;padding:clamp(56px,7vw,80px) 24px;text-align:center}
.pa-wdark h2{font-size:clamp(34px,4.4vw,52px);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.pa-wdark h2 mark{color:var(--pk-gold)}
.pa-wdark p{color:#c9cad6;margin-top:10px}

/* A document to read, 2026-11-08: the service agreement and "What you signed". A white kit sheet on the sand, the
   text held to a reading measure of about 68 characters, light headings at 24px and semibold below that. The text
   comes from PB_Service_Agreement::render_html(), which emits h2, h3, p, ul and strong, so those are what is styled. */
.pa-doc{padding:clamp(40px,6vw,72px) 24px}
.pa-doc + .pa-doc{margin-top:0}
.pa-doc__body{max-width:68ch;margin:0 auto;font-size:16px;line-height:1.7;color:var(--pk-soft)}
.pa-doc__body .pa-doc__title{font-size:clamp(26px,3vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1.15;color:var(--pk-ink);margin:0 0 20px;text-wrap:balance}
.pa-doc__body h2{font-size:24px;font-weight:400;letter-spacing:-.015em;line-height:1.25;color:var(--pk-ink);margin:40px 0 12px;text-wrap:balance}
.pa-doc__body h2:first-child{margin-top:0}
.pa-doc__body h3{font-size:17px;font-weight:600;line-height:1.35;color:var(--pk-ink);margin:28px 0 8px}
.pa-doc__body p{margin:0 0 14px}
.pa-doc__body ul{list-style:disc;margin:8px 0 16px;padding-left:22px}
.pa-doc__body li{margin:0 0 8px}
.pa-doc__body li:last-child{margin-bottom:0}
.pa-doc__body strong{font-weight:600;color:var(--pk-ink)}
.pa-doc__body a{color:var(--pk-ink);text-decoration:underline;text-underline-offset:3px}
.pa-doc__body a:hover{color:var(--pk-accent)}
.pa-doc__note{margin:0 0 12px;padding:14px 18px;border-radius:14px;background:var(--pk-paper)}
.pa-doc__note p{margin:0}
.pa-doc__meta{font-size:13.5px;color:var(--pk-muted);margin-bottom:4px!important}
@media (max-width:720px){.pa-doc{padding:40px 20px}}

@media (max-width:980px){
	.pa-side{grid-template-columns:1fr;max-width:448px}
	.pa-side .pa-inside .pk-bento{grid-template-columns:1fr;height:auto}
	.pa-side .pa-inside .pk-card:first-child{grid-column:auto;flex-direction:column;align-items:stretch}
	.pa-side .pa-inside .pk-card:first-child .pk-vignette{flex:none}
}
@media (max-width:860px){
	.pa-inside .pk-bento{grid-template-columns:1fr}
}
@media (max-width:520px){
	.pa-solo,.pa-side{margin-top:24px}
	.pa-whero{margin:0 8px 8px;border-radius:0 0 24px 24px}
	.pa-wdark{margin:0 8px 8px;border-radius:24px}
	.pa-welcome-page .pk-sheet{margin:0 8px 8px;border-radius:24px;padding-left:16px;padding-right:16px}
}