/* Header auth switch ported from rl-switch.html (source SHA-256 1e9740e2...). */

  @property --header-auth-frame-angle{syntax:"<angle>";inherits:false;initial-value:30deg}
  @property --header-auth-frame-contrast{syntax:"<color>";inherits:true;initial-value:#F28C35}
.header-auth-switch{
  --header-auth-frame-contrast:#F28C35;position:relative;z-index:1;width:206px;height:42px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:3px;overflow:hidden;
  border:1px solid rgba(76,120,134,.22);border-radius:12px;background:#EAF3F5;
  box-shadow:0 0 12px rgba(30,42,47,.075);isolation:isolate;
  transition:--header-auth-frame-contrast 470ms cubic-bezier(.33,1,.68,1)
}
.header-auth-switch[data-mode="register"]{--header-auth-frame-contrast:#5E8F9E}
.header-auth-switch-shell{--header-auth-frame-contrast:#F28C35;position:relative;flex:0 0 auto;isolation:isolate;overflow:visible;transition:--header-auth-frame-contrast 470ms cubic-bezier(.33,1,.68,1)}
.header-auth-switch-shell[data-mode="register"]{--header-auth-frame-contrast:#5E8F9E}
.header-auth-gradient-glow,.header-auth-gradient-contour-glow,.header-auth-gradient-frame{display:none}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .header-auth-gradient-glow{position:absolute;inset:0;z-index:0;display:block;overflow:visible;border-radius:12px;pointer-events:none}
  .header-auth-gradient-glow-plane{position:absolute;inset:-1px;border-radius:13px;--header-auth-frame-angle:30deg;background:conic-gradient(from var(--header-auth-frame-angle) at 50% 50%,color-mix(in srgb,var(--header-auth-frame-contrast) 16%,transparent) 0deg,transparent 70deg,color-mix(in srgb,var(--header-auth-frame-contrast) 28%,transparent) 126deg,var(--header-auth-frame-contrast) 158deg,color-mix(in srgb,var(--header-auth-frame-contrast) 20%,transparent) 205deg,transparent 260deg,color-mix(in srgb,var(--header-auth-frame-contrast) 30%,transparent) 307deg,var(--header-auth-frame-contrast) 338deg,color-mix(in srgb,var(--header-auth-frame-contrast) 16%,transparent) 360deg);filter:blur(11px) saturate(1.04);opacity:.42;transform:scale(1.03);transform-origin:center;will-change:--header-auth-frame-angle}
  .header-auth-gradient-contour-glow{position:absolute;inset:0;z-index:2;display:block;overflow:visible;border-radius:inherit;pointer-events:none;opacity:.9;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--header-auth-frame-contrast) 86%,transparent)) drop-shadow(0 0 8px color-mix(in srgb,var(--header-auth-frame-contrast) 45%,transparent))}
  .header-auth-gradient-contour-glow-clip{position:absolute;inset:0;padding:3px;overflow:hidden;border-radius:inherit;mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-origin:border-box,content-box;mask-clip:border-box,content-box;mask-composite:exclude;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-origin:border-box,content-box;-webkit-mask-clip:border-box,content-box;-webkit-mask-composite:xor}
  .header-auth-gradient-contour-glow-plane{position:absolute;top:50%;left:50%;width:500%;height:500%;transform:translate(-50%,-50%);--header-auth-frame-angle:30deg;filter:blur(5px);background:conic-gradient(from var(--header-auth-frame-angle) at 50% 50%,transparent 0deg,transparent 105deg,color-mix(in srgb,var(--header-auth-frame-contrast) 20%,transparent) 124deg,var(--header-auth-frame-contrast) 158deg,color-mix(in srgb,var(--header-auth-frame-contrast) 20%,transparent) 197deg,transparent 218deg,transparent 286deg,color-mix(in srgb,var(--header-auth-frame-contrast) 20%,transparent) 305deg,var(--header-auth-frame-contrast) 338deg,color-mix(in srgb,var(--header-auth-frame-contrast) 20%,transparent) 360deg);will-change:--header-auth-frame-angle}
  .header-auth-gradient-frame{position:absolute;inset:0;z-index:3;display:block;padding:3px;overflow:hidden;border-radius:inherit;pointer-events:none;mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-origin:border-box,content-box;mask-clip:border-box,content-box;mask-composite:exclude;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-origin:border-box,content-box;-webkit-mask-clip:border-box,content-box;-webkit-mask-composite:xor}
  .header-auth-gradient-plane{position:absolute;top:50%;left:50%;width:500%;height:500%;transform:translate(-50%,-50%);filter:blur(8px);background:conic-gradient(from var(--header-auth-frame-angle) at 50% 50%,#F6F5F4 0deg,#F6F5F4 127deg,var(--header-auth-frame-contrast) 143deg,var(--header-auth-frame-contrast) 172deg,#F6F5F4 188deg,#F6F5F4 307deg,var(--header-auth-frame-contrast) 323deg,var(--header-auth-frame-contrast) 352deg,#F6F5F4 360deg);--header-auth-frame-angle:30deg;will-change:--header-auth-frame-angle}
}
.auth-indicator{
  position:absolute;z-index:1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);overflow:hidden;
  border-radius:9px;background:#5E8F9E;transform:translateX(0);pointer-events:none;
  will-change:transform,background-color
}
.header-auth-switch[data-mode="register"] .auth-indicator{transform:translateX(100%)}
.auth-color-veil{
  position:absolute;z-index:0;inset:-12px -18px;border-radius:999px;
  background:var(--veil-color,#F28C35);filter:blur(13px) saturate(1.03);opacity:0;
  pointer-events:none;will-change:opacity,transform
}
.header-auth-switch [data-auth-mode]{
  position:relative;z-index:2;height:34px;min-width:0;padding:0 12px;border:0;border-radius:9px;
  background:transparent;color:#5F747B;font-size:10.5px;font-weight:820;line-height:1;
  display:grid;place-items:center;text-decoration:none;white-space:nowrap;cursor:pointer;transform:none!important;transition:color .22s ease
}
.header-auth-switch [data-auth-mode]:hover{color:#304C55}
.header-auth-switch [data-auth-mode][aria-pressed="true"]{color:#fff}
.header-auth-switch [data-auth-mode]::after{
  content:"";position:absolute;left:50%;bottom:3px;width:18px;height:2px;border-radius:999px;
  background:transparent;transform:translateX(-50%);opacity:0;
  transition:background-color .22s ease,opacity .22s ease;pointer-events:none
}
.header-auth-switch[data-mode="login"] [data-auth-mode="login"]::after{
  background:#F28C35;opacity:1
}
.header-auth-switch[data-mode="register"] [data-auth-mode="register"]::after{
  background:#4C7886;opacity:1
}
.header-auth-switch [data-auth-mode]:focus-visible{
  outline:2px solid rgba(30,42,47,.32);outline-offset:-3px
}
.header-auth-switch[data-busy="true"] [data-auth-mode]{pointer-events:none;cursor:default}
body[data-authenticated="true"] .header-auth-switch{display:none}
@media(max-width:760px){.header-auth-switch{width:176px;height:38px}.header-auth-switch [data-auth-mode]{font-size:8.5px}}
@media(max-width:520px){
  .header-auth-switch{width:142px;height:36px}.header-auth-switch [data-auth-mode]{padding-inline:6px;font-size:7.5px}
}
@media(max-width:360px){.header-auth-switch{width:132px}.header-auth-switch [data-auth-mode]{font-size:7px}}
