/* KIVOO v13.143 — embedded Clerk sign-in/sign-up tabs.
   Clerk owns authentication. KIVOO owns only the surrounding presentation and mode tabs. */
:root{
  --kivoo-auth-paper:#f1e8cf;
  --kivoo-auth-ink:#2d2a22;
  --kivoo-auth-muted:#786f60;
  --kivoo-auth-gold:#a47a2c;
}

/* Top-bar account entry */
.user-auth-slot{height:40px;min-width:40px;display:flex;align-items:center;justify-content:center}
.user-login-btn,.user-account-btn{
  appearance:none;-webkit-appearance:none;position:relative;height:40px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(8,11,16,.58);color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer;
}
.user-login-btn{display:flex;align-items:center;gap:8px;padding:0 13px 0 10px;font:900 9px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:.11em;text-transform:uppercase}
.user-login-btn svg{width:17px;height:17px}
.user-login-btn:active,.user-account-btn:active{transform:scale(.95)}
.user-account-btn{width:40px;padding:0;display:grid;place-items:center;overflow:visible}
.user-account-btn img,.user-account-initials{width:32px!important;height:32px!important;border-radius:50%}
.user-account-initials{display:grid;place-items:center;background:#1b1e24;font-size:10px;font-weight:900;letter-spacing:.04em}
.user-account-btn:after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:#72d69a;border:2px solid #090c10}

/* Full-screen editorial auth shell */
.kivoo-auth-shell{
  position:fixed;z-index:500;inset:0;display:none;overflow:hidden;background:#e9dec1;color:var(--kivoo-auth-ink);
}
.kivoo-auth-shell.open{display:block}
body.kivoo-auth-open{overflow:hidden}
body.kivoo-auth-open #app{pointer-events:none}
.kivoo-auth-background{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(247,240,219,.02),rgba(247,240,219,0) 38%,rgba(239,224,188,.04)),
    url('/design-packs/auth-login/v5/login-bg.webp');
  background-position:center center,center center;background-size:cover,cover;background-repeat:no-repeat;
  filter:saturate(1.08) contrast(1.04) brightness(.96);transform:scale(1.003);
}
.kivoo-auth-background:after{
  content:"";position:absolute;inset:0;background:
    radial-gradient(ellipse at 50% 49%,rgba(243,247,255,.22) 0 12%,rgba(243,247,255,.10) 26%,rgba(243,247,255,0) 48%),
    linear-gradient(180deg,rgba(12,23,41,.18),rgba(12,23,41,.04) 18%,rgba(12,23,41,.04) 82%,rgba(12,23,41,.22));
}
.kivoo-auth-brand-lockup{
  display:none;
  position:absolute;z-index:6;left:clamp(18px,4vw,58px);top:calc(clamp(20px,4vw,52px) + env(safe-area-inset-top));
  color:#29271f;text-shadow:0 1px rgba(255,255,255,.36);pointer-events:none;
}
.kivoo-auth-brand-name{font:500 clamp(27px,3.2vw,48px)/.95 Georgia,"Times New Roman",serif;letter-spacing:.20em;margin-right:-.20em}
.kivoo-auth-brand-name:after{content:"";display:block;width:clamp(56px,7vw,90px);height:1px;margin:12px 0 10px;background:linear-gradient(90deg,rgba(107,79,32,.7),rgba(107,79,32,0))}
.kivoo-auth-tagline{font:italic clamp(12px,1.3vw,17px)/1.42 Georgia,"Times New Roman",serif;color:#514a3d}
.kivoo-auth-stage{
  position:relative;z-index:2;width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  padding:calc(20px + env(safe-area-inset-top)) clamp(12px,3vw,34px) calc(20px + env(safe-area-inset-bottom));overflow:auto;
}
.kivoo-auth-form-pane{width:min(100%,420px);margin:clamp(78px,8vh,108px) auto clamp(64px,7vh,94px)}
.kivoo-auth-center-brand{display:flex;align-items:center;justify-content:center;margin:0 0 14px;color:#0f2037;text-align:center;text-shadow:0 10px 28px rgba(255,255,255,.18),0 1px 0 rgba(255,255,255,.28);font:900 clamp(30px,4.5vw,38px)/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.kivoo-auth-card{
  width:100%;box-sizing:border-box;padding:20px 26px 22px;border-radius:0;border:1px solid rgba(95,76,43,.28);
  background:#f8f1df;
  box-shadow:0 18px 42px rgba(74,54,24,.16),inset 0 1px 0 rgba(255,255,255,.82);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.kivoo-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 18px;padding:4px;border-radius:0;border:1px solid rgba(101,78,42,.13);background:rgba(222,207,171,.32);box-shadow:inset 0 1px rgba(255,255,255,.45)}
.kivoo-auth-tab{appearance:none;-webkit-appearance:none;min-height:39px;border:0;border-radius:0;background:transparent;color:#847863;font:800 11px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:.01em;cursor:pointer;transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease}
.kivoo-auth-tab:active{transform:scale(.985)}
.kivoo-auth-tab.active{background:rgba(255,252,244,.93);color:#332d24;box-shadow:0 3px 12px rgba(83,61,29,.10),inset 0 1px rgba(255,255,255,.82);border-radius:0}
.kivoo-auth-tab:focus-visible{outline:2px solid rgba(164,122,44,.45);outline-offset:2px}
.kivoo-auth-mount{width:100%;min-height:230px;color:#302b23;display:block;position:relative}
.kivoo-clerk-host{width:100%;min-height:230px;display:block;animation:kivooClerkHostIn .12s ease-out both}

.kivoo-auth-card:has(.kivoo-auth-mount[data-auth-mode="signin"]){padding-top:18px;padding-bottom:15px}
.kivoo-auth-mount[data-auth-mode="signin"]{min-height:178px}
.kivoo-auth-mount[data-auth-mode="signin"] .kivoo-clerk-host{min-height:178px}
.kivoo-auth-mount[data-auth-mode="signin"] .cl-main{gap:10px!important}
.kivoo-auth-mount[data-auth-mode="signin"] .cl-form{gap:10px!important}
.kivoo-auth-mount[data-auth-mode="signin"] .cl-footer{padding-top:5px!important}
.kivoo-auth-mount.switching:before{content:"";position:absolute;z-index:3;left:50%;top:78px;width:20px;height:20px;margin:-10px;border-radius:50%;border:2px solid rgba(113,86,40,.14);border-top-color:#a67e31;animation:kivooAuthSpin .7s linear infinite;pointer-events:none}
.kivoo-auth-mount.switching .kivoo-clerk-host:empty{opacity:0}
@keyframes kivooClerkHostIn{from{opacity:.25;transform:translateY(2px)}to{opacity:1;transform:none}}
.kivoo-auth-close{
  appearance:none;-webkit-appearance:none;position:fixed;z-index:20;right:calc(16px + env(safe-area-inset-right));top:calc(15px + env(safe-area-inset-top));
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(78,61,37,.16);background:rgba(250,245,230,.78);color:#443d31;
  display:grid;place-items:center;font-size:24px;line-height:1;box-shadow:0 8px 24px rgba(79,58,27,.10);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;
}
.kivoo-auth-close:active{transform:scale(.94)}

/* Loading/error state — only used before Clerk mounts or when Clerk itself fails to load. */
.kivoo-auth-status{min-height:220px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px;border-radius:0;border:1px solid rgba(105,84,50,.12);background:rgba(255,252,244,.55);text-align:center;color:#756d60}
.kivoo-auth-status strong{margin:13px 0 5px;color:#332f27;font-size:14px}.kivoo-auth-status small{max-width:31ch;color:#817969;font-size:10px;line-height:1.4}
.kivoo-auth-loader{width:22px;height:22px;border-radius:50%;border:2px solid rgba(113,86,40,.16);border-top-color:#a67e31;animation:kivooAuthSpin .85s linear infinite}
@keyframes kivooAuthSpin{to{transform:rotate(360deg)}}

/* Clerk layout — stable .cl-* hooks only. No DOM mutation and no runtime CSS injection. */
.kivoo-auth-mount>.cl-rootBox,
.kivoo-auth-mount .cl-rootBox,
.kivoo-auth-mount .cl-cardBox,
.kivoo-auth-mount .cl-signIn-root,
.kivoo-auth-mount .cl-signUp-root,
.kivoo-auth-mount .cl-card{
  width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;
}
.kivoo-auth-mount .cl-cardBox,.kivoo-auth-mount .cl-card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
/* KIVOO supplies the visible heading; Clerk keeps every authentication method and its own footer links. */
.kivoo-auth-mount .cl-header{display:none!important}
.kivoo-auth-mount .cl-main{gap:12px!important;padding:0!important}
.kivoo-auth-mount .cl-form{gap:12px!important}
.kivoo-auth-mount .cl-formFieldLabel{margin-bottom:6px!important;color:#5b5244!important;font-size:10px!important;font-weight:760!important}
/* v13.188: keep the first identity field one line lower, but constrain Clerk's
   label/action row to the exact form width so mobile edges never clip text. */
.kivoo-clerk-host-signin .cl-formFieldRow:has(input[name="identifier"]),
.kivoo-clerk-host-signup .cl-formFieldRow:has(input[name="username"]){
  margin-top:12px!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;transform:none!important;
}
.kivoo-clerk-host-signin .cl-formFieldRow:has(input[name="identifier"]) .cl-formFieldLabelRow,
.kivoo-clerk-host-signup .cl-formFieldRow:has(input[name="username"]) .cl-formFieldLabelRow{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;
  margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;transform:none!important;
}
.kivoo-clerk-host-signin .cl-formFieldRow:has(input[name="identifier"]) .cl-formFieldLabel,
.kivoo-clerk-host-signup .cl-formFieldRow:has(input[name="username"]) .cl-formFieldLabel{
  flex:1 1 auto!important;min-width:0!important;margin-left:0!important;transform:none!important;
}
.kivoo-clerk-host-signin .cl-formFieldRow:has(input[name="identifier"]) .cl-formFieldAction,
.kivoo-clerk-host-signup .cl-formFieldRow:has(input[name="username"]) .cl-formFieldAction{
  flex:0 0 auto!important;max-width:45%!important;margin-left:auto!important;margin-right:0!important;transform:none!important;white-space:nowrap!important;
}
.kivoo-clerk-host-signin .cl-formFieldRow:has(input[name="identifier"]) .cl-formFieldInput,
.kivoo-clerk-host-signup .cl-formFieldRow:has(input[name="username"]) .cl-formFieldInput{
  display:block!important;margin-left:0!important;margin-right:0!important;max-width:100%!important;transform:none!important;
}
.kivoo-auth-mount .cl-formFieldInput,.kivoo-auth-mount .cl-otpCodeFieldInput{
  width:100%!important;min-height:49px!important;height:auto!important;box-sizing:border-box!important;padding:0 14px!important;
  border-radius:13px!important;border:1px solid rgba(104,84,51,.19)!important;background:rgba(255,253,247,.91)!important;color:#302b23!important;
  box-shadow:inset 0 1px rgba(255,255,255,.76)!important;font-size:15px!important;
}
.kivoo-auth-mount .cl-formFieldInput::placeholder{color:#a39a89!important}
.kivoo-auth-mount .cl-formFieldInput:focus,.kivoo-auth-mount .cl-otpCodeFieldInput:focus{outline:none!important;border-color:#aa8436!important;box-shadow:0 0 0 4px rgba(170,132,54,.11)!important;background:#fffdf7!important}
.kivoo-auth-mount .cl-formButtonPrimary{
  width:100%!important;min-height:49px!important;border-radius:13px!important;border:1px solid rgba(122,87,26,.20)!important;
  background:linear-gradient(180deg,#cba451,#b88931)!important;color:#251f15!important;box-shadow:0 9px 22px rgba(143,105,39,.16),inset 0 1px rgba(255,255,255,.32)!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif!important;font-size:12px!important;font-weight:900!important;
}
.kivoo-auth-mount .cl-socialButtons{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:0!important}
.kivoo-auth-mount .cl-socialButtonsBlockButton{display:flex!important;width:100%!important;min-height:46px!important;border-radius:13px!important;border:1px solid rgba(104,84,51,.16)!important;background:rgba(255,253,247,.82)!important;color:#3c352a!important;box-shadow:inset 0 1px rgba(255,255,255,.74)!important}
.kivoo-auth-mount .cl-socialButtonsBlockButtonText{color:#3c352a!important;font-size:11px!important;font-weight:760!important}
.kivoo-auth-mount .cl-dividerRow{display:flex!important;align-items:center!important;gap:10px!important;margin:2px 0!important}
.kivoo-auth-mount .cl-dividerLine{background:rgba(105,85,53,.13)!important}.kivoo-auth-mount .cl-dividerText{color:#8c826f!important;font-size:9px!important}
.kivoo-auth-mount .cl-footer{padding-top:8px!important;background:transparent!important}
.kivoo-auth-mount .cl-footerAction{display:none!important}
.kivoo-auth-mount .cl-footerActionText{color:#7d7464!important}
.kivoo-auth-mount .cl-footerActionLink,.kivoo-auth-mount .cl-formFieldAction,.kivoo-auth-mount .cl-formResendCodeLink,.kivoo-auth-mount .cl-backLink,.kivoo-auth-mount a{color:#956d24!important;font-weight:800!important}
.kivoo-auth-mount .cl-identityPreview{background:rgba(255,253,247,.76)!important;border:1px solid rgba(104,84,51,.16)!important;border-radius:13px!important}
.kivoo-auth-mount .cl-alert{border-radius:12px!important}.kivoo-auth-mount .cl-formFieldErrorText{color:#a24435!important;font-size:10px!important;line-height:1.35!important}.kivoo-auth-mount .cl-formFieldSuccessText{color:#557252!important}

/* Clerk profile modal from the signed-in account page. */
.cl-modalBackdrop{z-index:900!important}.cl-modalContent{z-index:901!important}

@media(max-width:760px){
  .kivoo-auth-background{background-size:cover,cover;background-position:center center,center center;filter:saturate(1.14) contrast(1.035)}
  .kivoo-auth-brand-lockup{left:18px;top:calc(17px + env(safe-area-inset-top))}
  .kivoo-auth-brand-name{font-size:25px;letter-spacing:.17em;margin-right:-.17em}.kivoo-auth-brand-name:after{width:54px;margin:9px 0 8px}.kivoo-auth-tagline{font-size:11.5px}
  .kivoo-auth-stage{padding-left:10px;padding-right:10px;-webkit-overflow-scrolling:touch}
  .kivoo-auth-form-pane{width:min(100%,374px);margin:clamp(132px,19vh,176px) auto clamp(102px,14vh,136px)}
  .kivoo-auth-center-brand{margin-bottom:12px;font-size:30px;letter-spacing:.16em}
  .kivoo-auth-card{padding:17px 17px 17px;border-radius:0}
  .kivoo-auth-card:has(.kivoo-auth-mount[data-auth-mode="signin"]){padding-top:16px;padding-bottom:13px}
  .kivoo-auth-mount[data-auth-mode="signin"],.kivoo-auth-mount[data-auth-mode="signin"] .kivoo-clerk-host{min-height:170px}
  .kivoo-auth-tabs{margin-bottom:15px}.kivoo-auth-tab{min-height:38px}
  .kivoo-auth-close{right:11px;top:calc(9px + env(safe-area-inset-top));width:38px;height:38px}
  .kivoo-auth-mount .cl-formFieldInput,.kivoo-auth-mount .cl-otpCodeFieldInput,.kivoo-auth-mount .cl-formButtonPrimary{min-height:48px!important}
}
@media(max-width:390px){
  .user-login-btn{width:40px;padding:0;justify-content:center}.user-login-btn>span{display:none}
  .kivoo-auth-form-pane{margin-top:124px;margin-bottom:90px}.kivoo-auth-card{padding-left:15px;padding-right:15px}
}
@media(max-height:700px) and (max-width:760px){
  .kivoo-auth-form-pane{margin-top:106px;margin-bottom:72px}.kivoo-auth-card{padding-top:18px;padding-bottom:14px}}
@media(prefers-reduced-motion:reduce){.kivoo-auth-loader,.kivoo-auth-mount.switching:before,.kivoo-clerk-host{animation:none!important}}

.kivoo-auth-status strong:empty,.kivoo-auth-status small:empty{display:none!important}


/* v13.175 authenticated-session resolution and account-hydration guards */
.user-auth-slot.auth-checking .user-login-btn{opacity:.72}
html.kivoo-account-hydrating #stage{pointer-events:none;touch-action:none}
html.kivoo-account-hydrating #collectionLaunch,
html.kivoo-account-hydrating #xpChip{opacity:.58;cursor:default}



/* v13.177 auth control startup: reserve geometry without showing a false identity. */
.user-auth-slot.auth-pending{visibility:hidden!important;pointer-events:none!important;min-width:40px}
.user-auth-slot.signed-in,.user-auth-slot.signed-out{animation:kivooAuthResolvedIn .18s ease-out both}
@keyframes kivooAuthResolvedIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.user-auth-slot.signed-in,.user-auth-slot.signed-out{animation:none!important}}



/* v13.288 — discreet legal links inside member access card */
.kivoo-auth-legal-mini{display:flex;align-items:center;justify-content:center;gap:6px;margin:7px 0 -3px;color:rgba(77,67,53,.48);font-size:7.5px;line-height:1;letter-spacing:.025em}
.kivoo-auth-legal-mini button{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:3px 1px;color:rgba(89,73,49,.56);font:700 7.5px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;cursor:pointer;text-decoration:none}
.kivoo-auth-legal-mini button:hover{color:#735622}.kivoo-auth-legal-mini button:focus-visible{outline:1px solid rgba(164,122,44,.42);outline-offset:2px}
@media(max-width:390px){.kivoo-auth-legal-mini{margin-top:6px;font-size:7px}.kivoo-auth-legal-mini button{font-size:7px}}
